Hi, I've put a large picture as a parallax on the very top of a site.

It looks very nice and behaves as it should, but as soon as I logout, the image changes as if you zoom in on it and behaves quite different, not good.

The Parallax version is 1.1b5

I'd also like the image to change size on mobile devices.

hoghoj1

the image changes as if you zoom in

Hmm, sounds like a JavaScript error that only occurs when not logged-in. Can you provide an URL?

For the mobile view: Since the plugin does all the sizing and scrolling math automatically, it will not be possible to shrink the image down, which in turn would make it move out of its container boundaries at certain scroll positions.

If you want to make a parallax image larger, there are certain possibilities. Such as …

placing the parallax image section inside an additional wrapper which has the inline style overflow:hidden and
the parallax image section negative side margins, e.g. margin-left:-20%; margin-right:-20%;

To make it only larger at mobile viewports the latter would require a css class and a media query, e.g.

@media (max-width:480px) {
 .my-certain-parallax-image-section {
    margin-left:-20%; margin-right:-20%;
  }
}

Instead of negative margins, the same could also be achieved using e.g. transform:scale(1.4);

I can provide you with the URL AND 2 pictures to skow you the difference:

http://webroynd2.dk/tjsea2/#Ovast

pic. 1: Logged in, looks ok

Pic2: Logged out out of proportion

hoghoj1

Hi again,

what I'm trying to say, is that I'd like it to be responsive enough to also be able to show the image on a phone or tablet, as like here:

hoghoj1

I see.

The 1st 'parallax-caption' section inside the wapper, which contains lots of empty paragraphs, forces the wrapper to be over 1000px in height. This is why the image is blown up so much.
The scaling is correct for 50% scroll speed, basically. Actually - since the wrapper sits on the very top of the page - it could be a bit smaller, but unfortunately the scaling algorithm doesn't take this fact into account.

Parallax Image isn't well suited for images containing text/logos, because it will always be cropped to some degree.

But I see that you managed to build a much better working solution - the one with the animation -  which places the logos as separate, non-parallaxing column elements.
What speaks against doing it the same way in the header?

BTW: I see there is 'height:800px' in the class attribute of if the wrapper. It won't hurt but I believe it's rather ment to be a style attribute.
Try height:60vw instead - this will make the wrapper always have the aspect ratio of the used image (skelti_4.png, 691px / 1143px =~ 0.6)

For the ocean waves: It's beautiful but … 29 MB? Huh! Even mobile devices will download this huge file.

Hi again,

have changed to using Slider factory instead, looks better now. But I wonder, how to adjust the positioning of the textboxes in the slides?

Where can I find a list with different parameters to adjust the sledes coming in from rigt, left, up or down, and how to position them on the slide?

hoghoj1

Currently, positioning and sizing of the text boxes is done via Typesetter's native grid classes, which is rather limited.

With Bootstrap/Bootswatch based themes, horizontal alignment can be improved by using Bootstrap grid classes:
To place a box on the right of a slide, use the css classes: col-sm-6 col-sm-offset-6
(col-[VP]-offset-[N] moves a column [N] grid columns to the right for the [VP] viewport)

Vertical alignment is a whole different story.
While it can be done by adding arbitrary margin-top values to the text boxes, it is quite hard to get good results at small viewports, unless everything is fine-tuned via media queries.
Using css Flexbox styles is the best solution for vertical alignment. Flexbox implementation was still too buggy back when I created the plugin - it broke the automatic height calculation of the slider.
Nowadays, I believe it will work, albeit, IE will most likely still have issues.

There is another way to do vertical alignment by using display:inline-block togehter with :before pseudo content - I'll check if i can find working css snippets for SliderFactory.

For the missing left- and right-in-transitions:

You can add this css to SliderFactory_innerFx.css

/* -- slide in from-right -- */
.gpSlide .slide-in-from-right {
-ms-transform:translate(200%,0%);
-webkit-transform:translate(200%,0%);
transform:translate(200%,0%);
-webkit-transition:1s ease-out;
transition:1s ease-out;
}
.gpSlide-in .slide-in-from-right {}
.gpSlide-out .slide-in-from-right,
.gpSlide-active .slide-in-from-right {
-ms-transform:translate(0%,0%);
-webkit-transform:translate(0%,0%);
transform:translate(0%,0%);
}

/* -- slide in from-left -- */
.gpSlide .slide-in-from-left {
-ms-transform:translate(-200%,0%);
-webkit-transform:translate(-200%,0%);
transform:translate(-200%,0%);
-webkit-transition:1s ease-out;
transition:1s ease-out;
}
.gpSlide-in .slide-in-from-left {}
.gpSlide-out .slide-in-from-left,
.gpSlide-active .slide-in-from-left {
-ms-transform:translate(0%,0%);
-webkit-transform:translate(0%,0%);
transform:translate(0%,0%);
}

... and use either slide-in-from-left or slide-in-from-right css classes for the text boxes.

Since css translate uses the elements' coordinate system (contrary to the parents' when doing position:absolute / relative) the used 200% values are relative to the text boxes own widths.
That means, with narrow boxes or ones placed on the right and uing slide-in-from-left, 200% will not be sufficient. You will have to try it.

Oops, this one is for sliding in from the top

/* -- slide in from top -- */
.gpSlide .slide-in-from-top {
-ms-transform:translate(0,-200%);
-webkit-transform:translate(0,-200%);
transform:translate(0,-200%);
-webkit-transition:1s ease-out;
transition:1s ease-out;
}
.gpSlide-in .slide-in-from-top {}
.gpSlide-out .slide-in-from-top,
.gpSlide-active .slide-in-from-top {
-ms-transform:translate(0%,0%);
-webkit-transform:translate(0%,0%);
transform:translate(0%,0%);
}

Again, 200% might not be ideal in every case.

Adding this css will enable vertical positioning of boxes. But since it also uses transforms, it will cancel any slide-in transitions

/* ###################################################### */
/* ####   vertical alignment of boxes inside slides  #### */
/* ####                                              #### */
/* #### add the valign-boxes class to the slider's   #### */
/* #### wrapper section, then use the following      #### */
/* #### classes for the boxes for vertical alignment #### */
/* ####                                              #### */
/* ####   valign-top, valign-middle, valign-bottom   #### */
/* ####                                              #### */
/* ###################################################### */

/* push height:100% down possible nested wrapper structures */
.gpSlideWrapper.valign-boxes .gpSlide,
.gpSlideWrapper.valign-boxes .gpSlide > .container,
.gpSlideWrapper.valign-boxes .gpSlide > .container-fluid,
.gpSlideWrapper.valign-boxes .gpSlide > .container > .row,
.gpSlideWrapper.valign-boxes .gpSlide > .container-fluid > .row {
position:relative;
height:100%;
min-height:inherit;
}

/* zero first-in-children elements' top margin
   AND first-in-childrens-first-child elements' top margin (if section content is wrapped with an additional <div>) */
.gpSlideWrapper.valign-boxes .GPAREA > *:first-child,
.gpSlideWrapper.valign-boxes .GPAREA > div > *:first-child {
margin-top:0;
}

/* zero bottom margin of a child-GPAREA's penultimate element (last is always div.gpclear)
   AND child-GPAREA's penultimate elements' last child (if section content is wrapped with an additional <div>) */
.gpSlideWrapper.valign-boxes .GPAREA > *:nth-last-child(2),
.gpSlideWrapper.valign-boxes .GPAREA > *:nth-last-child(2) > *:last-child {
margin-bottom:0;
}

.gpSlideWrapper.valign-boxes .GPAREA.valign-top {}

.gpSlideWrapper.valign-boxes .GPAREA.valign-middle {
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}

.gpSlideWrapper.valign-boxes .GPAREA.valign-bottom {
position:absolute;
top:100%;
-webkit-transform:translateY(-100%);
-ms-transform:translateY(-100%);
transform:translateY(-100%);
}

There is another way to do vertical alignment by using display:inline-block togehter with :before pseudo content

Turns out to be too complicated to implement it for all possible nested structures. The trick works well if applied only to the parent wrapper of aligned boxes and it's children. Since this parent could be .gpSlide, .container .row (or even other custom classes), it's impossible to write general-purpose rules. CSS still doesn't have usable parent selectors.

Similar applies to flexbox. Both will need custom css rules for specific use cases. That's the price to pay for the freedom of free nesting of slide content ;-(