I'm working on a website and now I have to make an Intro animation exactly like this http://www.elitemodel.fr/
On this website when I load the page, the logo and backgroung is sliding to the left. My client wants this effect on his website.
For now, I create a page intro.php with this html code:
<div class="intro">
<div class="logo-intro"></div><!-- /.logo logo-intro -->
</div><!-- /.intro -->
<div class="black_overlay"></div><!-- /.logo logo-intro -->
I'm trying to make this with css3 and little javascript.
After the html, this is my CSS code for the animation:
.intro,
.intro .logo-intro {
overflow: hidden;
-moz-animation: slide 2s ease 1.5s forwards;
-webkit-animation: slide 2s ease 1.5s forwards;
-o-animation: slide 2s ease 1.5s forwards;
-ms-animation: slide 2s ease 1.5s forwards;
animation: slide 2s ease 1.5s forwards;
}
@-moz-keyframes slide /* Firefox */
{
from {width: 100%; }
to {width: 0;}
}
@-webkit-keyframes slide /* Safari and Chrome */
{
from {width: 100%;}
to {width: 0;}
}
@-o-keyframes slide /* Opera */
{
from {background: white;}
to {background: black;}
}
@-ms-keyframes slide /* IE10 */
{
from {width: 100%;}
to {width: 0;}
}
@keyframes slide
{
from {width: 100%;}
to {width: 0;}
}
}
.logo-intro {
-webkit-animation: logo 1s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: logo 1s;
animation-iteration-count: 2;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes logo {
from {top: 50%;}
to {left: -99999px;}
}
@keyframes logo {
from {top: 50%;}
to {left: -99999px;}
}
After the animation is over I redirecting intro.php to the home page with javascript
// Your application has indicated there's an error
window.setTimeout(function(){
// Move to a new location or you can do something else
var url = "http://www.gaelscalpaesthetics.com/accueil";
$(location).attr('href',url);
}, 4000);
This is working but how can I made this animation without redirecting?
Regards,
Try something like this
body, html {
max-width: 100%;
overflow-x: hidden;
}
.logo,
.black-bg {
display: flex;
min-height: 100vh;
min-width: 100vw;
position: fixed;
justify-content: center;
align-items: center;
font-size: 50px;
}
.logo {
z-index: 1;
background: white;
animation: animateLogo 2s ease-in-out 1.3s forwards;
}
.black-bg {
background: black;
z-index: 2;
transform: translateX(100vw);
animation: animateBlackBg 1.5s ease-in-out 1.5s forwards;
}
.content {
display: flex;
flex-direction: row;
height: 100vh;
width: 100%;
}
.content img {
flex: 1;
padding: 20px;
}
@keyframes animateLogo {
80% {
transform: translateX(-100vw);
opacity: 1;
}
100% {
transform: translateX(-100vw);
opacity: 0;
}
}
@keyframes animateBlackBg {
40% {
transform: translateX(0);
opacity: 1;
}
80% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 0;
}
}
<div class="logo">LOGO</div>
<div class="black-bg"></div>
<div class="content">
<img src="http://placehold.it/500x900">
<img src="http://placehold.it/500x900">
</div>
简单地说,您可以将代码放在主页中并在页面加载时运行,在动画结束后显示您的内容。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.