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>
Related
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 have to make an animation of 5 balls of different colors that move in a wave. I am struggling with the different starting positions of the balls as the instructions say. And the position and color of the first-child goes last in the sequence of 5 balls for some reason.
Use this color palette (Links to an external site.) to style the div elements with the circle class as per the reference above. Each circle should be 50px in diameter.
Implement an animation so that the circles move up 100px, then move back down to their original position. The movement should have a duration of 1 second. Each ball should start the animation at a slightly different point in time so that they appear slightly out of phase. The overall effect is that they appear as an infinite looping ‘wave’.
Here is the HTML
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
background-color:antiquewhite;
animation: circle 1s linear infinite;
float: left;
margin: 5px;
}
.circle:first-child {animation-delay: -0.1s; background: #EF476F}
.circle:nth-child(2) {animation-delay: -0.2s; background: #FFD166;}
.circle:nth-child(3) {animation-delay: -0.4s; background: #06D6A0;}
.circle:nth-child(4) {animation-delay: -0.6s; background: #118AB2;}
.circle:nth-child(5) {animation-delay: -0.8s; background: #073B4C;}
#keyframes circle {
0%, 100% {transform: translateY(0px);}
50% {transform: translateY(100px);}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>CSS Challenges</h1>
<section>
<h2>Challenge 3</h2>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</section>
</body>
</html>
Your problem is the nth-child(). Your first circle element is actually the second child element in the container, because the first child element is the <h2>.
The nth-child() does not distinct by class so this method won't work.
However, the solution is found in another, more fitting selector nth-of-type(). This selector also can't distinguish by class name, but can by element type.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: antiquewhite;
animation: circle 1s ease-in-out infinite; /* changed it to ease-in-out just for better visual result */
float: left;
margin: 5px;
}
.circle:nth-of-type(1) { animation-delay: -0.1s; background: #EF476F }
.circle:nth-of-type(2) { animation-delay: -0.2s; background: #FFD166; }
.circle:nth-of-type(3) { animation-delay: -0.4s; background: #06D6A0; }
.circle:nth-of-type(4) { animation-delay: -0.6s; background: #118AB2; }
.circle:nth-of-type(5) { animation-delay: -0.8s; background: #073B4C; }
#keyframes circle {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(100px); }
}
<h1>CSS Challenges</h1>
<section>
<h2>Challenge 3</h2>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</section>
The selector will find the element with class circle and find the nth of its type - in this case div. If you add another element, like <span class"circle"></span>, it will get the styles of .circle:nth-of-type(1) because this is the first span with this class.
When my animation ends, my bottom_row element should disappear (as display: none is set at 100%), but it does not happen. Why?
.bottom_row {
opacity: 1;
animation: hide 5s linear 0s 1 normal forwards running;
}
#keyframes hide {
0% {
opacity: 1;
}
95% {
opacity: 0.05;
}
100% {
opacity: 0;
display: none;
color: red;
font-size: 48px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
</body>
</html>
If I simply set display: none; right away, the cell is not present in the layout (which is what I want at the end of my anim):
.bottom_row {
opacity: 1;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
</body>
</html>
How do I make an element disappear from the layout / grid without js? Is it possible and why it does not work with animations?
You can use height: 0;overflow:hidden; instead and you will get the same visual result:
.bottom_row {
opacity: 1;
animation: hide 5s linear forwards ;
}
#keyframes hide {
0% {
opacity: 1;
}
95% {
opacity: 0.05;
}
100% {
opacity: 0;
height: 0;
overflow:hidden;
color: red;
font-size: 48px;
}
}
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
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'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.