Streaming live at 10am (PST)

Fullscreen Cover Image


#1

Hi Guys,

i know this topic is discussed a lot and i know how to make images fill the entire browser size.
Still there is something i dont know how to do in the visual composer.

See this example here: https://wordpressboss.com/cp/designer-demo/designer/index.html

Now shrink ONLY THE BROWSER HEIGHT (not the width). I noticed that the image resizes to a certain point and after that the images will not resize further. It feels like the image is fixed and the browser window is a mask.

Maybe someone out there knows the trick.

I am curious.


How can I create this double scroll page
#2

try something like 75vh.

EDIT: In looking at it again... I think you are asking something different.

Try positioning the image 0,0

style="background-position: 0% 0%;"

and look into background-ratio.


#3

Hi @Revolution I am actually looking for a way to build this inside webflow without custom code.
Still thanks for your fast response.


#4

The effect that you're seeing there is called Parallax.

Theres a tutorial on how to achieve those kind of effect here:

Let me know if that helps.

Cheers,


#5

hi @aaronocampo. Perfect answer. This is really helpful.
Thank you very much.


#6

Hi @George_Konig

That seems a bit much, since all the custom code you would need is this

var parallaxeffect = $(window);
    parallaxeffect.stellar({
        responsive: true,
        positionProperty: 'position',
        horizontalScrolling: false
    });

and then set the div you have your background image to <div data-stellar-background-ratio="0.5">
and the background-attachment to fixed.

And your done.

Best,
Karl-Heinrich


#7

I thought I mentioned background ratio ?

Maybe not. I'm sick as a dog right now.

Barfing up all over the place... ekkk.

But the the due date on this darn project doesn't care :frowning:


#8

It'll be really helpful to see it implemented.

Thanks for your help to the community. :smile:


#9

Hahah @aaronocampo,
I love how you managed to sneak your way around not phrasing this as a question :joy:

I got good news for you boys, you can do it without a single line of code.
Take a look here.

Steps:
Paste the script in your webflow site or host it somewhere and implement it (Page: JSParallax on my read-only)

Design away but leave your target div (e.g. parallax-wrapper) transparent. (Overlays are still A-ok). Also, your div needs height in order to make this work.

Navigate to the settings (gear symbol) and add two custom attributes to your target div: data-parallax to the value: scroll and data-image-src to the value: /path/to/image.jpg.

How to get your image URL? Upload it to your asset manager and grab die url via inspector. More details.

It's really easy, right?

Best,
Karl-Heinrich

P.S.: If you want to take a look @George_Konig
You'll get through this, deadlines aren't the worst thing. Imagine having to do 1000 adjustments after giving your everything and hitting the deadline :smiley: @Revolution


#10

@Karl-Heinrich

Great info and explanation!! :raised_hands:

Thanks! :thumbsup:

(the only thing that I would say is that I wouldn't say "without any code" because at the end you're using external code to make it work) :wink:


#11

@aaronocampo,

Agreed :blush: It now says "without having to code" :laughing:


#12

@Karl-Heinrich This is really helpful. Thanks a lot for sharing this.


#13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.