I want to build something like the “How to host with Webflow” Section on Reliable and lighting-fast website hosting service | Webflow
Tried hard, but no chance. Is there a Template or Tutorial available?
cheers
chris
Hi @wilbourge
let us see what you have done so far.
Please share a read-only link of your project:
Thanks,
Matthias
I had a look on your project. Try to give your "div"s names. It’s tough for others to find items.
- add a section with “100%” width and “400vh” height to your project
- put in this “section” a “container” and call it “sticky-container”
- style it:
– put in the “container” your first tile
– copy the “container” and paste into your section twice
If this work, you can think about “scaling” an “opacity”
the animation part was what i was looking for …
I’ll help to get the final thing. But first you have to prepare it.
- set your section back to display block
- set your div “sticky” height to “auto”
- remove “sheet 2” and “sheet 3” in both “sticky” div
- remove in second div “sticky” your “sidebar”
1 Like
i started a new one
Yeah. Looks good.
- select your “section” (with all the stuff in it) an change height to 1000vh
- select “sticky-container” set position top to “0”
- give every “slide” a unique name like you started “slide-1”, “slide-2”…
- remove your “interactions” on “slide-2”
all right.
but how can i do the animation part?
where do i set the animation, and how to build the color and scale effect as in the example above.
-
select every “slide”
-
go to transform and set
-
select every “slide” and set to “relative”
-
add the first slide a position top to “0”
-
the second slide to 10, the third to 20 and go on
-
select your section and add a “while scrolling in view” interaction
- create a new scroll animation
- build something like this
- if the second slide comes into the viewport, you should start scaling (75%) the first one
- if the third slide comes into the viewport, you should start scaling (80%) the second one
1 Like
you saved my day! thanks a lot matthias!
1 Like
i got another “unsolvable” … when i click the navigation it goes straight to a slide … perfect … but if i want to go back from slide 5 to slide 1 … it gets stuck
- remove your svg. in background, it slows everything down use png or whatever
- remove margin 500 from every slide
still have the problem with the navigation
and when i remove the 500 margin, every slide sticks together, how can i have more space between?
You can solve your navigation only with custom code.
<script>
$(document).ready(function() {
$(".your1button").mousedown(function() {
var positionSlide = $(".your1Slide").offset().top;
$('html, body').animate({scrollTop:positionSlide},"slow");
});
});
</script>
i tried to set it, but guess i did it wrong?