Jump to content

what a nice landingpage

bernhard

By bernhard,
in Pub

 Share

Recommended Posts

bernhard Hero Member

bernhard

Posted
Posted

i've shared a nice website once and there where some opinions that it was too heavily animated... though i want to share another one, as i have never seen such a great experience for a one-pager / scrolling / animation site:

https://www.imaginecurve.com/

what do you think about it?

ps: neither tested on mobile nor inspected loading or cross browser compatibility... on my chrome desktop it was just impressive :)

Link to comment
Share on other sites
tpr Hero Member

tpr

Posted
Posted

Yes, such sites look/feel nice, provided you have a capable internet connection and a fast computer.

Otoh they are usually a nightmare from usability point of view not to mention the complexity the developer faces :)

I sometimes add a small parallax but even the smallest one requires much extra work.

Recently I saw this site that catched my eyes:

http://moto.oakley.com/

Ps. it's heavily animated! :)

  • Like 2
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

also very nice! i wonder how that is done? i mean... i understand normal css animations, but i have no clue how the glasses get devided into separate parts when scrolling??

does anyone have some sources to read for me? :)

Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted
also very nice! i wonder how that is done? i mean... i understand normal css animations, but i have no clue how the glasses get devided into separate parts when scrolling??

They are separate images:

<div class="sequence-container" data-anchor-target="#adaptable" style="z-index: -1;">

   <img class="lazy skrollable    unrendered " src="images/sequence2-final/WEB_AMX_shot002_00008.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00008.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-820-top="display:block;" data-775-top="display:none;" style="display: none;">
   <img class="lazy skrollable    unrendered " src="images/sequence2-final/WEB_AMX_shot002_00010.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00010.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-776-top="display:block;" data-725-top="display:none;" style="display: none;">
   <img class="lazy skrollable    unrendered " src="images/sequence2-final/WEB_AMX_shot002_00012.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00012.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-726-top="display:block;" data-675-top="display:none;" style="display: none;">
   <img class="lazy skrollable    unrendered " src="images/sequence2-final/WEB_AMX_shot002_00014.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00014.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-676-top="display:block;" data-625-top="display:none;" style="display: none;">
  <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00016.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00016.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-626-top="display:block;" data-575-top="display:none;" style="display: none;">
   <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00018.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00018.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-576-top="display:block;" data-525-top="display:none;" style="display: none;">
   <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00020.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00020.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-526-top="display:block;" data-475-top="display:none;" style="display: none;">
   <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00022.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00022.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-476-top="display:block;" data-425-top="display:none;" style="display: none;">
   <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00024.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00024.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-426-top="display:block;" data-375-top="display:none;" style="display: none;">
   <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00026.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00026.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-376-top="display:block;" data-325-top="display:none;" style="display: none;">
   <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00028.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00028.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-326-top="display:block;" data-275-top="display:none;" style="display: none;">
 <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00030.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00030.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-276-top="display:block;" data-225-top="display:none;" style="display: none;">    
   <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00032.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00032.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-226-top="display:block;" data-175-top="display:none;" style="display: none;"> 
   <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00034.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00034.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-176-top="display:block;" data-125-top="display:none;" style="display: none;">
 <img class="lazy skrollable      unrendered " src="images/sequence2-final/WEB_AMX_shot002_00036.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00036.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-126-top="display:block;" data-75-top="display:none;" style="display: none;">
 <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00038.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00038.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data-76-top="display:block;" data--200-top="display:none;" style="display: block;"> 
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00041.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00041.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--199-top="display:block;" data--225-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00045.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00045.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--224-top="display:block;" data--275-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00049.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00049.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--274-top="display:block;" data--325-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00053.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00053.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--324-top="display:block;" data--375-top="display:none;" style="display: none;">
  <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00057.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00057.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--374-top="display:block;" data--425-top="display:none;" style="display: none;"> 
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00061.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00061.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--424-top="display:block;" data--475-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00065.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00065.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--474-top="display:block;" data--525-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00069.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00069.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--524-top="display:block;" data--600-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00073.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00073.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--599-top="display:block;" data--650-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00079.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00079.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--649-top="display:block;" data--700-top="display:none;" style="display: none;"> 
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00083.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00083.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--699-top="display:block;" data--750-top="display:none;" style="display: none;">
  <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00087.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00087.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--749-top="display:block;" data--800-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00091.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00091.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--799-top="display:block;" data--850-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00095.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00095.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--849-top="display:block;" data--900-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00099.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00099.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--899-top="display:block;" data--950-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00103.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00103.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--949-top="display:block;" data--1000-top="display:none;" style="display: none;">
   <img class="lazy skrollable     rendered " src="images/sequence2-final/WEB_AMX_shot002_00105.jpg" data-original="images/sequence2-final/WEB_AMX_shot002_00105.jpg" alt="" data-anchor-target="#adaptable" data-2000-top="display:none;" data--999-top="display:block;" style="display: none;">
    
</div>

The fan in my 2011 Macbook Pro goes crazy visiting both of these sites and the page scrolling is very laggy!

  • Like 1
Link to comment
Share on other sites
tpr Hero Member

tpr

Posted
Posted

Check ScrollMagic, for example:

http://scrollmagic.io/

Items' vertical position are constantly watched and animations kick in when a certain value is reached. So it's entirely a frontend task, plus it's a plus if you can think in animations.

The glasses is put together from two parts, I guess :)

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

but how is this code generated? and how the images? i find some scrollmagic words in the code of my linked website, but on the scrollmagic site the demos do not look like one can make such websites with it?!

thanks for your answers so far :)

Link to comment
Share on other sites
tpr Hero Member

tpr

Posted
Posted

When the user scrolls down to an element, JavaScript updates the element's inline style, eg "left: 120px". If you scroll more, it will be 150px, for example, so it "moves", depending on the scroll offset. But it can depend on other element's position too, and you can update other CSS property also, eg opacity, to stimulate fade in or fadeout. The scroll event is fired multiple times on each scroll and Js needs to recalculate everything plus updates the DOM, which needs a lot of resources.

Link to comment
Share on other sites
elabx Hero Member

elabx

Posted
Posted

I have the same problem of laggy animations, it never really gets to actually feel smooth. I always feel this scrolling pages should occur in discrete steps, so you can have control of the animation, I feel like leaving control to the scrolling makes it a bit quirky, at least a kind of damping like jQuery NiceScroll library provides. I tried this types myself once, failed miserably, so much work on to keep it responsive.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...