javascript - Recreate the loading and opening effect as observed in this specific website -


website: http://www.poigneedemainvirile.com/le-studio/

i tried research on how recreate page load bar , slide done website (this observed when home page loaded or transition page when click option menu). inspect element helped me understand using barba.js in manner transitions, being relatively new entire thing, want know how come close recreating effect.

the effect

the effect can created couple of div elements , js. since using tweenlight greensock, used here:

var overlay_container = document.getelementbyid("overlay_container"),      top_overlay       = document.getelementbyid("top_overlay"),      middle_overlay    = document.getelementbyid("middle_overlay"),      bottom_overlay    = document.getelementbyid("bottom_overlay");    tweenlite.to(middle_overlay, 1, {width:0, oncomplete: function(){      tweenlite.to([top_overlay, bottom_overlay], .5, {height:0, oncomplete: function(){          overlay_container.style.display = 'none';      }});  }});
body{ background: black; color: #fff; font-family: arial, helvetica, sans-serif; padding: 1rem; }  #overlay_container{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 100; }  #overlay_container div{ position: absolute; right: 0; width: 100%; background: #fff; }  #top_overlay{ top: -2px; height: 50%; }  #middle_overlay{ top: 50%; height: 4px; margin-top: -2px; opacity: .6; }  #bottom_overlay{ bottom: -2px; height: 50%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/tweenmax.min.js"></script>    <h1>the best title in world</h1>  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. dolore a, ratione deserunt optio. fuga necessitatibus recusandae quam cumque, modi esse autem sed quidem fugit sit expedita quasi, itaque asperiores cupiditate.</p>  <p>consectetur adipisicing elit. impedit facere illum autem obcaecati at. voluptates, expedita quae perspiciatis officia nemo odio. modi dignissimos iste ullam dolore assumenda aperiam eum officiis. lorem ipsum dolor sit amet, consectetur adipisicing elit. est fugit quia et facilis optio voluptas dolorem nemo eaque maiores dolorum doloribus dignissimos excepturi eius, accusantium in, libero ut earum repudiandae.</p>  <p>earum fuga corporis suscipit eaque, harum minima sint. alias assumenda, laborum unde excepturi quas rem. nam atque doloremque quia.</p>  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. dolore a, ratione deserunt optio. fuga necessitatibus recusandae quam cumque, modi esse autem sed quidem fugit sit expedita quasi, itaque asperiores cupiditate.</p>    <div id="overlay_container">      <div id="top_overlay"></div>      <div id="middle_overlay"></div>      <div id="bottom_overlay"></div>  </div>

using on page transitions

you can animate stuff when page loads, not when leave page. reason, site needs use ajax. if not familiar ajax, means never switch page when clicking on link. instead, load content dynamically, , display it. there plenty of tutorials online that.

one page, multiple urls?

if @ address bar when clicking on links, you'll see url changes, if visited multiple pages, did not. achieved using history js api. pushes url states browsing history.


-

Comments

Post a Comment

Popular posts from this blog

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

sql - MySQL - Finding Empty relations -

i trying work out how full list of team leaders , team members our tables. including team leaders have no team. we have basic data structure have table person contains our basic person object. people extend table in details table. one of extended pieces of information have team_leader status. have 2 relevant details define this: detail_isteamleader , detail_teamleader . first boolean , defines short list of team leaders. second defines persons team leader (ideally subset). _person table_ person_id person_name _detail table_ detail_id detail_person_id detail_isteamleader detail_teamleader i can team leaders have team using following query: select tl.person_id tlref, tl.person_name tlname, per.person_id perref, per.person_name pername detail left outer join person per on detail.person = per.person_id left outer join person tl on detail_teamleader = tl.person_id order tlname, psname however, fails team_leaders detail.isteamleader true not occur in detail_teamleader...
Read more

linux - gzip: stdin: not in gzip format tar: Child returned status 1 tar: Error is not recoverable: exiting now -

i have bash script creates tar.gz , encrypts sends drive. cannot open .tar.gz afterwards. here process... bash script encrypts. #!/bin/sh # tar automysqlbackup directory tar -zcf "red-backup-$(date '+%y-%m-%d').tar.gz" /var/lib/automysqlbackup/ # encrypt tar openssl aes-256-cbc -a -salt -in "red-backup-$(date '+%y-%m-%d').tar.gz" -out "red-backup-$(date '+%y-%m-%d').tar.gz.enc" -pass 'pass:mysecretpwd' # remove original tar rm -rf "red-backup-$(date '+%y-%m-%d').tar.gz" # upload google drive gdrive upload --file "red-backup-$(date '+%y-%m-%d').tar.gz.enc" -p "jofhriout849uioejfoiu09" then download file , use sudo openssl aes-256-cbc -e -in red-backup-2016-09-22.tar.gz.enc -out red-backup-2016-09-22.tar.gz i enter passphrase file twice , file called red-backup-2016-09-22.tar.gz when try sudo tar -zxvf red-backup-2016-09-22.tar.gz and gzip: stdin: not ...
Read more