I'm building a small website and would like to get the text (and an image when I add one) to fade in when someone accesses the website?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color: lightgrey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<style>
p.one {
border: 1px lightgrey;
background-color: lightgrey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Our Routes</li>
<li>Contact</li>
<li>About</li>
</ul>
<img class="displayed" src="E:\Users\PC\Documents\Image" alt="...">
<h1 align="center"> HOME </h1>
<p class="one" , align="center"> Text Goes here
</p>
</body>
</html>
http://codepen.io/JTBennett/pen/GorVRL [your site w/ fade and motion]
http://codepen.io/JTBennett/pen/BjpXRo [example of the following instructions]
Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
All the animation commands will appear in your CSS like so:
#keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (#keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
The effect can be achieved with jQuery much quicker, as you can see in one of the other answers here.
After you've learned to do it by hand, I suggest playing around with this CSS3 animation generator if you want to save a bit of time:
http://cssanimate.com/
Just make sure you understand it first though.
Lastly, this is an example of jQuery performing similar functions (though using SVGs instead of divs this time, same process though):
http://codepen.io/JTBennett/pen/YwpBaQ
I don't know what element you have but you can do a few things.
If you are using javascript, or jquery you can make an element fade in easily.
Jquery:
$(document).ready(function(){
$('.myItemClass').fadeIn();
});
You can also do it with just CSS
CSS:
/* The animation code */
#keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.myClass {
animation-name: example;
animation-duration: 1s;
}
You can fade in elements when the document loads by loading the page with the elements hidden (opacity : 0;) in CSS. Then on document ready you can remove the class, so long as it has a transition for that css property—you'll have an effect.
CSS
div {
transition: opacity 2s;
opacity: 1;
}
.hidden {
opacity: 0;
}
JS
$(document).ready(function(){
$('.hidden').removeClass('hidden');
});
It is very simple don't need even jqyery, pure CSS and pure Javascript.
CSS
body {
opacity:0;
transition: 300ms opacity;
}
Javascript
function pageLoaded() {
document.querySelector("body").style.opacity = 1;
}
window.onload = pageLoaded;
Related
I was wondering if someone can help me troubleshoot an issue I'm having on a Squarespace site I'm currently building. I'm currently using a Fluid Engine section with a background video and placing some custom code in a container for an animation (See here: https://grapefruit-ellipse-2jhy.squarespace.com - Password: Lovetheone2023).
The problem I'm having is that this works fine in Safari, but just doesn't seem to be working in Chrome. However, when testing the code in isolation on Codepen using Chrome, the animation works as expected, so something about the combination of Squarespace and the code seems to be creating an issue which I can't figure out.
Any help would be greatly appreciated! For reference please see the custom code below
<style>
.animated-alternating-heading .h1 {
position: absolute !important;
display: inline-block !important;
text-align: center;
width: inherit;
animation-name: alternate !important;
animation-duration: 20s !important;
animation-iteration-count: infinite !important;
opacity: 0 !important;
}
.blue {
color: #31C0D2 !important;
}
.magenta {
color: #E2144E !important;
}
.peach {
color: #F39B40 !important;
}
#keyframes alternate {
0% {
opacity: 0;
transform: translateY(30px);
}
8%,
25% {
opacity: 1;
transform: translateY(0px);
}
30% {
opacity: 0;
transform: translateY(-15px);
}
}
.animated-alternating-heading .h1:nth-child(1) {
animation-delay: 0s;
}
.animated-alternating-heading .h1:nth-child(2) {
animation-delay: 5s;
}
.animated-alternating-heading .h1:nth-child(3) {
animation-delay: 10s;
}
.animated-alternating-heading .h1:nth-child(4) {
animation-delay: 15s;
}
</style>
<div class="animated-alternating-heading">
<h1 class="h1">We believe all children have a right to <span class="magenta">survive</span></h1>
<h1 class="h1">We believe all children have a right to <span class="blue">thrive</span></h1>
<h1 class="h1">We believe all children have a right to <span class="peach">flourish</span></h1>
<h1 class="h1">Making a Difference One Child at a Time</h1>
</div>
How to efficiently render iframe durig hover as shown here
so far i have this as example
HTML: <a class="iframe-link" href="https://saheed.codes/uses">Home Page<iframe src="https://saheed.codes/" loading="lazy" style={{width: "100%", height: "600px", border: "0px none"}}></iframe></a>
.
css:
.iframe-link iframe {
display: none;
}
.iframe-link:hover iframe {
display: block;
}
I am working with react, and tailwind for styling and would appreciate answers in that direction.
Thanks!
If you want to avoid using a wrapper for it, you could use opacity directly on the iframe. You would already have a reserved space for it and you wouldn't have to use a wrapper. It depends a bit on your use case, your solution is a valid alternative.
iframe {
opacity: 0;
transition: opacity 0.5s linear;
}
iframe:hover {
opacity: 1;
}
Ended Up doing it this way
.iframe-link iframe {
display: none;
}
.iframe-link:hover iframe {
-webkit-animation: slow 2s;
-moz-animation: slow 2s;
-ms-animation: slow 2s;
-o-animation: slow 2s;
animation: slow 2s;
display: block;
/* opacity: 1; */
}
#keyframes slow {
from { opacity: 0; }
to { opacity: 1; }
}
I implemented a blinkingtext animation on my system to keep blinking red, but I want it only on the screen that I am putting the code and not at all.
Follow the code below.
/deep/ nb-layout-header nav {
animation:blinkingText 1s infinite;
}
#keyframes blinkingText {
0% {
background-color: #374355;
}
100%{
background-color: #D42333;
}
}
I'm using the jm spinner plugin on my site, but I want to change the bouncing dots from changing size (bouncing) when they show. They display as a 'bounce' that makes them look like they are growing in size. I just want them to stay the same size, but I've been playing with the .css file and the debugger and I can't figure out to make any changes!
Here is a code pen
On the site it says I can modify/style the spinner like
.spinner {
}
but I'm not sure what to put here.
It seems like I don't want the 'sk-bouncedelay' but not sure
Something like this? If so, you can forget about the plugin.
.spinner>div {
width: 13px;
height: 13px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0;
animation: showhide 1.4s infinite;
}
.spinner .dot1 {
animation-delay: -0.32s;
}
.spinner .dot2 {
animation-delay: -0.16s;
}
#keyframes showhide {
0%,
100% {
opacity: 0;
}
80% {
opacity: 1;
}
}
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
</div>
I've been trying to find a solution for a while now but none seem to work.
The issue I am having happens when navigating to any and all the pages on the site- it's very annoying.
While I would expect that site images take time to load, this loading affects my navigation bar and the loading of my site's logo. For the time that it takes each page to load, my site's logo is completely absent- this causes my navigation bar to be shifted all the way up until the logo appears. This usually takes about a split second but it's also completely dependent on the user's internet connection).
How do I prevent this from happening? This causes my entire site to "bounce" when navigating, with all the content being shifted up for a brief moment while the logo is absent.
Give your image tag an absolute height attribute. This will make the browser keep the img tag the height it should be and allow the elements to load in the proper place.
You can also try tweaking a loader to have the page load only when all of the elements in the page have loaded. Something as simple as this:
<!DOCTYPE html>
<html>
<head>
<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>
With some modification, can help the UI experience!
Source: W3 Schools
Hope it helps!