Topic Closed
hoghoj1
185 Posts
HH-Support

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

3 years ago#10687

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

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);

Edited: 3 years ago#10688

hoghoj1
185 Posts
HH-Support

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

 

3 years ago#10690

hoghoj1
185 Posts
HH-Support

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

3 years ago#10691

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

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.

3 years ago#10692

hoghoj1
185 Posts
HH-Support

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

3 years ago#10694

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

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.

3 years ago#10695

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

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.

Edited: 3 years ago#10696

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

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.

3 years ago#10697

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

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%);
}
3 years ago#10699

juergen
1.5K Posts
56.2K Downloads
16 Plugins
design, web development & visual effects

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 ;-(

3 years ago#10700

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

HH-Support

Company located in T├│rshavn, Faroe Islands. * Webpage Design * Consultant & Provider of a wide range of programs for visually impaired and dyslextics.

Find out more about our Provider Spotlight

Log In

  Register