I'm trying to make the smoothState.js plugin work. After clicking on a link that leads from index.html to secondary.html the animation produces a reverse but does not lead to secondary.html, remaining in fact on the same screen.
Here you will find the small example uploaded on codepen:
https://codepen.io/vizzale/project/editor/DPkyBr
here instead the code:
(index.html)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>smooth</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="cover" class="scene">
<div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:100vh;background-color:red;z-index:100;"></div>
link page
</section>
<section style="width:100vw;height:20vh;background-color:grey;"></section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.smoothState.min.js"></script>
<script src="main.js"></script>
</body>
</html>
(secondary.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>smooth</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="cover" class="scene">
<div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:30vh;background-color:red;z-index:100;"></div>
link page
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.smoothState.min.js"></script>
<script src="main.js"></script>
</body>
</html>
(JavaScript)
$(function() {
'use strict';
var $page = $('#cover'),
options = {
debug: true,
prefetch: true,
cacheLength: 2,
forms: 'form',
onStart: {
duration: 700, // Duration of our animation
render: function($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
(CSS)
* {
margin: 0;
padding: 0;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
color: #000;
background: #fff;
will-change: auto;
overflow-x: hidden;
}
a, a:link, a:hover, a:active, a:visited {
color: #000;
text-decoration: none;
}
#cover {
height: 100vh;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0.6;
-webkit-transform: translate3d(0, -100vh, 0);
transform: translate3d(0, -100vh, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInDown {
0% {
opacity: 0.6;
-webkit-transform: translate3d(0, -100vh, 0);
transform: translate3d(0, -100vh, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.scene .scene_element {
-webkit-animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.scene .-fadeindown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.scene.is-exiting .scene_element {
animation-direction: alternate-reverse;
}
Try with class="m-scene" on your container, I don't think this class can be changed.
I answer my own question to inform you guys that the problem does not seem to exist. It is sufficient to emulate the site on a live server (for example Atom Live Server) in order to correctly switch from one page to another.
Related
I'm trying to make the ::backdrop pseudo-element of my dialog component using CSS. I've been able to achieve it on Edge and Chrome, but it seems like Firefox is not correctly applying the transition.
Does anyone know if that's not supported in FF, or my code is just wrong ? The modal itself respects the opacity transition, it's just the ::backdrop pseudo-element that comes up instantly.
This is the code I used for a quick proof of concept:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog PoC</title>
<style>
dialog {
opacity: 0;
transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
}
dialog.active {
opacity: 1;
}
dialog::backdrop {
background: black;
transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
opacity: 0;
}
dialog.active::backdrop {
opacity: 0.8;
}
</style>
</head>
<body>
<dialog>
<p>test nice</p>
<button id="closeBtn">close dialog</button>
</dialog>
<button id="openBtn">
open dialog
</button>
<script>
const dialog = document.querySelector('dialog')
const openBtn = document.querySelector('#openBtn')
const closeBtn = document.querySelector('#closeBtn')
openBtn.addEventListener('click', open)
closeBtn.addEventListener('click', close)
function open() {
dialog.showModal()
dialog.classList.add('active')
}
function close() {
dialog.close()
dialog.classList.remove('active')
}
</script>
</body>
</html>
I've made a nice film grain animation that im putting over a webpage to make a nice 4:3 old movie type look, however, I cant work out how to confine the animation to the div. I'm using Bootstrap if it effects it. Basically, I only want the grain to be inside the div so that it creates a black bar look outside. Many thanks! Code as follows:
#titleName {
font-family: 'Abril Fatface', cursive;
font-size: 4vw;
text-align: center;
white-space: nowrap;
background-color: rgb(68, 68, 68);
color: rgb(255, 255, 255);
margin-top: 0px;
}
#titleName:after {
animation: grain 2s steps(3) infinite;
background-image: url("http://creativeloads.com/foto/seamless-film-grain-294.jpg");
content: "";
height: 300%;
left: -50%;
opacity: 0.1;
position: fixed;
top: -100%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0)
}
10% {
transform: translate(-5%, -10%)
}
20% {
transform: translate(-15%, 5%)
}
30% {
transform: translate(7%, -25%)
}
40% {
transform: translate(-5%, 25%)
}
50% {
transform: translate(-15%, 10%)
}
60% {
transform: translate(15%, 0%)
}
70% {
transform: translate(0%, 15%)
}
80% {
transform: translate(-15%, 5%)
}
90% {
transform: translate(-10%, 10%)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="scss/custom.scss">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<title>Home</title>
</head>
<body style="background-color:rgb(0, 0, 0);">
<script src="https://unpkg.com/#popperjs/core#2.4.0/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<header>
<!-- Nav Bar -->
</header>
<main>
<!--- Content -->
<div id="titleName" class="container">
TITLE
<div class="noise"></div>
</div>
</main>
<footer>
<!--- Footer -->
</footer>
</body>
</html>
From what I gathered regarding your code it seems like you have no set width or height to your container, if you want to limit your child element you can set its parent width and let your grain be width: 100%;
Another solution is to create an svg rectangle and use it as a clip-path to your div.
{I’ll add the code once I’m on my laptop}
I´m working on a project for college and I´m trying to imitate a effect on this page: https://u.gg/ for my homepage, I managed to change the backgrounds but now I´m trying to add a "fade" effect, any suggestions? Just found a way to add de 'fade' effecto but I need to match it with the intervals
<!DOCTYPE html>
<html>
<head>
<title>Trip Guru</title>
<meta charset="utf-8" />
<link href="main.css" rel="stylesheet" />
<link href="Content/bootstrap-grid.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="home" id="landing_home">
<nav class="navbar bg-transparent">
<a class="navbar-brand" href="index.html"><img src="https://i.postimg.cc/Y0VvwJQ2/logo-white.png" class="logo" /></a>
</nav>
</div>
<script src="main_script.js"></script>
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/bootstrap.js"></script> <!--Bootstrap JS-->
</body>
</html>
CSS
body,html {
height:100%;
}
.logo {
width:50px;
height:50px;
}
.home {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
JS
$(document).ready(function(){
var header = $('#landing_home');
var backgrounds = new Array(
'url(https://i.postimg.cc/nM76hD9j/bridge.jpg)'
, 'url(https://i.postimg.cc/HV9RQ12T/lake.jpg)'
, 'url(https://i.postimg.cc/686Scbjn/mountain.jpg)'
, 'url(https://i.postimg.cc/qNmF5cSY/river.jpg)'
, 'url(https://i.postimg.cc/Ff765dQK/villa.jpg)'
);
var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.fadeTo("slow", 0.5)
header.css('background-image', backgrounds[current]);
header.fadeTo("slow", 1)
}
setInterval(nextBackground, 1000);
header.css('background-image', backgrounds[0]);
});
https://jsfiddle.net/zqtkme2x/
function nextBackground() {
header.animate({opacity: 0}, 0);
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]).animate({opacity: 1}, 'slow')
}
setInterval(nextBackground, 3000);
header.css('background-image',backgrounds[0]).animate({opacity: 1}, 'slow')
JQuery animate
header.animate({opacity: 1}, 'slow')
The opacity value may need to be reset before you run it
header.animate({opacity: 0}, 0);
I always use this classes for animate things in my projects:
In a css file:
.animated {
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fast {
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
Then use for example
<div class="animated fadeIn">
<span> Hello </hello>
</div>
And you can use class fast to do the fadeIn fast.
<div class="animated fadeIn fast">
<span> Hello </hello>
</div>
I have this simple loading indicator:
https://jsbin.com/putuloledu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Load indicator slowing down</title>
</head>
<body>
<style>
.timeIndicator {
height: 5px;
width: 0;
background: #12b3c4;
animation-name: indicator-load;
animation-duration: 7s;
}
#keyframes indicator-load {
from {
width: 0;
}
to {
width: 200px;
}
}
</style>
<div class="timeIndicator"></div>
</body>
</html>
Which is supposed to show a self-growing rectangle indicator which grows evenly then stops at 200px width.
As can be seen, no easing is added anyhow.
Why then the animation slows down in the end and how to disable it making it even from start to end?
If i have understood you correctly this is what you may need just use the animation-timing-function:linear
here i have done it
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Load indicator slowing down</title>
</head>
<body>
<style>
.timeIndicator {
height: 5px;
width: 0;
background: #12b3c4;
animation-name: indicator-load;
animation-duration: 7s;
animation-timing-function: linear;
}
#keyframes indicator-load {
from {
width: 0;
}
to {
width: 200px;
}
}
</style>
<div class="timeIndicator"></div>
</body>
</html>
Lookup the animation-timing-function animation property.
I'm trying to implement this example of 3d geometric transform with css:
3D Geometric Transform
But my animation is not working like that example and this is what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<style>
#im1 { transform: translateZ(25px); }
#im2 { transform: translateZ(-25px); transform: translateY(-50px); }
#obj1 {
animation: theRotate 2s linear infinite;
perspective: 1000px;
transform-style: preserve-3d;}
#keyframes theRotate
{
from {transform: rotateY(0deg) }
to {transform: rotateY(360deg) }
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-1" id="obj1">
<img src="wicon2.png" id="im1" style="width:50px">
<img src="wicon.png" id="im2" style="width:50px">
</div>
</div>
</div>
</body>
</html>
According to this, with perspective:1000 the animation should work fine, but it doesn't.
If there is another simple way to do this, maybe with JS, will be fine too.
I appreciate your time, thanks.
I took a look at the initial link/example you posted and copied the relevant CSS code from there and adapted it to your existing code. The following edit of your posted code should work in the intended way (shown in the linked example).
please note: If you run the snippet below, it will rotate empty images, because the image link is still the same from your post (wicon1.png)
<html>
<head>
<meta charset ="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<style>
.scene3d
{
perspective: 1000px;
width: 600px;
height: 340px;
margin-left: auto;
margin-right: auto;
}
.object3d
{
position: absolute;
width: inherit;
height: inherit;
/*top: 20px;*/
transform-style: preserve-3d;
}
.face3d
{
position: absolute;
left: 165px;
top: 15px;
}
#im1 { transform: translateZ(150px); }
#im2 { transform: translateZ(-150px); }
.scene3d.begin { perspective: 100000px; }
.scene3d.end { perspective: 1000px; }
#obj1 { animation: theRotate 4s linear infinite; }
#keyframes theRotate
{
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}
</style>
<div class="container">
<div class="row scene3d">
<div class="col-sm-1 col-md-1 object3d" id="obj1">
<img src="wicon1.png" id="im1" class="face3d" style="width:50px">
<img src="wicon2.png" id="im2" class="face3d" style="width:50px">
</div>
</div>
</div>
</body>
</html>