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>
Related
I am programming an AMP website www-dev.example.com that points users to a sign-up page.
The sign up page is hosted on an identity server using the subdomain auth.www-dev.example.com.
I now want to deploy my AMP website to a staging environment www-stg.example.com and at the same time point users to it's respective staging identity server auth.www-stg.example.com.
Ideally I would have a config per environment in a relative appsettings.json file and use amp-mustache to map the environment variables into the the urls of <button> or a tags.
I'm currently achieving the desired functionality, somewhat, with amp-list, but it looks like a dogs breakfast causing some undesired and painstaking effects on the font end with alignment and scaling due to the fixed dimensions.
Is there a simple way to set environment variables in AMP for use in links?
HTML Implementation
<amp-list width="130" height="45" layout="flex-item" src="/appsettings.json">
<template type="amp-mustache">
<button type="button" on="tap:AMP.navigateTo(url='{{signup-url}}', target='_top')">Sign Up</button>
</template>
</amp-list>
appsettings.json Implementation
{
"items":[{
"login-url":"https://auth.www-dev.example.com/login",
"logout-url":"https://auth.www-dev.example.com/logout",
"signup-url":"https://auth.www-dev.example.com/signup",
"unsubscribe-url":"https://auth.www-dev.example.com/unsubscribe"
}]
}
Any help or suggestions would be much appreciated!
Edit - Example showing the start of the front end issues I'm looking to avoid
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bug</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<link rel="canonical" href="https://example.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style amp-custom>
/* Delete this to reveal amp-list*/
.flex {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;}
.left {
border: solid 1px blue;
}
.right {
border:solid 1px green;
}
</style>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<template id="foo" type="amp-mustache">
<button class="button-secondary" type="button"
on="tap:AMP.navigateTo(url='{{signup-url}}', target='_top')">Sign Up</button>
</template>
</head>
<body>
<div class="flex">
<div class="left">
<p>Flex Left</p>
<button on="tap:foobar.changeToLayoutContainer()">Change Layout</button>
</div>
<div class="right">
<amp-list id="foobar" width="auto" height="1" src="/appsettings.json" template="foo">
<div placeholder>Loading</div>
<div fallback>Failed to load data.</div>
</amp-list>
</div>
</div>
</body>
</html>
I ended up using Terraform and parsing the html file through as a template during deployment, prior to uploading the html to its hosting destination.
HCL
module "template_files" {
source = "hashicorp/dir/template"
base_dir = "./src/static_website"
template_file_suffix = ".html"
template_vars = {
canonical = var.canonical
signup-url = var.signup-url
}
}
HTML
<button type="button" on="tap:AMP.navigateTo(url='${signup-url}', target='_top')">Sign Up</button>
Everything can be found by reviewing the source code on http://trouver.sabalo.design, or the snippet below. :)
Im trying to get the placeholder text that says "Enter Code Here" to match the color of the button next to it that says "GO", and what it looks like when you enter something into the box.
When you enter something into the box, it looks the way I want "Enter Code Here" to look before someone starts typing.
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
}
#-webkit-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Trouver by SABALO</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://codepen.io/P1N2O/pen/xxbjYqx.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<img src="/e1c85d81-b56f-41f3-bddb-634fe3bde046_200x200.png" style="background-color: white;">
<br>
<br>
<h1 class="text-light">Trouver by SABALO</h1>
<div class="btn-group mt-2 mb-4" role="group" aria-label="actionButtons">
<input class="d-block btn btn-outline-light" type="text" id="code" placeholder="Enter Code Here"/><button class="d-block btn btn-outline-light" type="button" value="Go" onclick="redirectUser();">Go</button>
</div>
<h6 class="text-light small font-weight-bold"></h6>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" integrity="sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=" crossorigin="anonymous"></script>
<!-- partial -->
<script>
function redirectUser() {
var code = document.getElementById("code").value;
if(code == "0"){
window.location.href = "https://www.w3schools.com/";
}
else if(code == "1"){
window.location.href = "https://www.google.com/";
}
else if(code == "2"){
window.location.href = "https://www.bing.com/";
}
else{
alert("Error: Code not found");
}
}
</script>
</body>
</html>
You can use ::placeholder {color: red;} to change color of placeholder for Chrome, Firefox, Opera, Safari 10.1+.
It will surely solve your problem but if it doesn't let me know in the comments, I will try my best to help you.
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.
I am running the following code and once the animation completes the opacity of the image changes. Till animation is going on the image looks smooth after that it changes the opacity.
please find code at following JS: https://jsfiddle.net/7fk0b788/
<!DOCTYPE html>
<html lang ="en">
<head>
<title> joe's Pizza Co.-New York's Best Pizza</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>
Joe's Pizza
</h1>
</header>
<div>
<section id="feature">
</section>
<section id="home-text">
</section>
<section id="offers">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
#container
{
background: url("Img/background.jpg") no-repeat center center fixed;
background-size:cover;
min-width: 100%;
min-height: 100%;
position: fixed;
top:0;
left:0;
animation: fadein 4s;
filter: opacity(50%);
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:.5;
}
}
There are a few ways you can do it:
Add forwards to the animation property as that will make sure the animation once it hits its 100%, it will persist:
animation: fadein 4s forwards;
or by adding
opacity:.5;
Using forwards
Using opacity
Change the opacity .5 to 1. It'll go smooth till the end. Your code snippet below
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
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>