#keyframes slide {
from {
left: 100%;
}
to {
left: -100%;
}
}
#-webkit-keyframes slide {
from {
left: 100%;
}
to {
left: -100%;
}
}
#marquee {
color: var(--gray-dark);
width: 100%;
overflow: hidden;
position: relative;
}
#announcement_text {
position: relative;
white-space: nowrap;
width: 1000%;
animation-name: slide;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: slide;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: infinite;
-webkit-animation-iteration-count: infinite;
}
<div class="d-flex justify-content-between align-items-center breaking-news bg-white">
<div class="d-flex flex-row flex-grow-1 flex-fill justify-content-center bg-danger py-2 text-white news">
<span class="d-flex align-items-center"> <i class="far fa-newspaper">
</i> </span>
</div>
<div id="marquee">
<div style="color:black; paddingleft:5px;" id="announcement_text">
LONG MESSAGE
</div>
</div>
</div>
Note: sorry for my bad English
I am trying to scroll long messages especially an article with this code but the marquee animation cuts the text and repeats from the start. A help would be greatly appreciated thank you
Related
I have the following HTML:
<div class="rating">
<div class="star active"></div>
<div class="star active"></div>
<div class="star active"></div>
<div class="star"></div>
<div class="star"></div>
</div>
Output:
★★★☆☆
How do I animate in CSS the active stars, one by one?
I tried:
.star {
transition: background-color 0.5s ease;
background-color: #eee;
}
.star.active {
background-color: #000;
}
This transitions the color of all the active stars at once. How to I transition the active stars one by one, from left to right?
I am trying to achieve this without JS. The rating score can be anything. Also the range can be any number (there could be 3 or 5 or 8 or 10 stars, etc)
Because of the active class is already assigned, it's better to use animation instead of transition.
.star {
background-color: #eee;
}
.star.active {
animation: star-pop 0.5s ease forwards;
}
#keyframes star-pop {
to {
background-color: #000;
}
}
Then you can give a different animation-delay for different nth-child:
.star.active:nth-child(1) {
animation-delay: 0s;
}
.star.active:nth-child(2) {
animation-delay: 0.5s;
}
.star.active:nth-child(3) {
animation-delay: 1s;
}
.star.active:nth-child(4) {
animation-delay: 1.5s;
}
.star.active:nth-child(5) {
animation-delay: 2s;
}
/* ... */
If you have a css precompiler(such as sass), you can achieve it with a loop:
.star.active {
// change the number 5 to maximum possible stars(8, 10, etc.)
#for $i from 1 through 5 {
&:nth-child(#{$i}) {
animation-delay: #{($i - 1) * 0.5}s;
}
}
}
.star {
display: inline-block;
width: 40px;
height: 40px;
border: solid 1px #000;
background-color: #eee;
}
.star.active {
animation: star-pop 0.5s ease forwards;
}
.star.active:nth-child(1) {
animation-delay: 0s;
}
.star.active:nth-child(2) {
animation-delay: 0.5s;
}
.star.active:nth-child(3) {
animation-delay: 1s;
}
.star.active:nth-child(4) {
animation-delay: 1.5s;
}
.star.active:nth-child(5) {
animation-delay: 2s;
}
#keyframes star-pop {
to {
background-color: #000;
}
}
<div class="rating">
<div class="star active"></div>
<div class="star active"></div>
<div class="star active"></div>
<div class="star"></div>
<div class="star"></div>
</div>
I am trying to figure out how I can write a CSS animation that allows an image (id: slam) to suddenly appear on screen and cover all of the content without displacing any of the text. So far, this is what I have:
HTML:
body{
height: 100%;
}
div{
overflow: auto;
text-align: center;
}
#-webkit-keyframes slam-animation {
0% {
opacity: 0;
-webkit-transform: scale(10);
}
100% {
opacity: 1;
-webkit-transform: rotate(-30deg) scale(1);
}
}
#slam {
-webkit-animation-name: slam-animation;
-webkit-animation-duration: 1s;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
<body>
<img id="slam" src="assets/images/Undesirable.jpg" alt = "undesirable">
<header>
<h1>Text</h1>
</header>
<div class="main_game">
<p>Stuff</p>
<div class = "col-xs-2">
</div>
<div class = "left_box col-xs-4">
<p>Stuff</p>
</div>
<div class = "right_box col-xs-4">
<p>Stuff</p>
</div>
<div class = "col-xs-2">
</div>
</div>
</body>
Use position:absolute to your image.
Using absolute position the element is removed from the normal document flow; no space is created for the element in the page layout i.e. it will not affect the position of other elements.
Reference Link to understand position absolute
Stack Snippet
body {
height: 100%;
}
.main_game div {
text-align: center;
}
.main {
position: relative;
}
#-webkit-keyframes slam-animation {
0% {
opacity: 0;
-webkit-transform: scale(10);
}
100% {
opacity: 1;
-webkit-transform: rotate(-30deg) scale(1);
}
}
img#slam {
position: absolute;
top: 0;
left: 0;
}
#slam {
-webkit-animation-name: slam-animation;
-webkit-animation-duration: 1s;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
<div class="main">
<img id="slam" src="http://via.placeholder.com/350x350" alt="undesirable">
<header>
<h1>Text</h1>
</header>
<div class="main_game">
<p>Stuff</p>
<div class="col-xs-2">
</div>
<div class="left_box col-xs-4">
<p>Stuff</p>
</div>
<div class="right_box col-xs-4">
<p>Stuff</p>
</div>
<div class="col-xs-2">
</div>
</div>
</div>
I have a row of pictures where I want to fade in one image after another.
.jumbotron > div > div picture > img{
animation: fadein 6s;
-moz-animation: fadein 6s; /* Firefox */
-webkit-animation: fadein 6s; /* Safari and Chrome */
-o-animation: fadein 6s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
This code let's all images fade in at the same time.
I'm using typo3 with a template, the html structure is a bit complicated because of this - I'm sorry.
<section class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="c1170" class="">
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class=" ">
<div id="c1163" class="">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-xs-6">
<div class=" ">
<div id="c1164" class="">
<div class="ce-textpic ce-left ce-above">
<div class="" >
<div class="row">
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<div class="ce-media">
<picture alt="Geigen3D_m_02.gif">
<video style="display: none;"><![endif]-->
<![CDATA[ orig Width: 123px ]]>
<![CDATA[ xs scale: 0.5, 544px, max: 272px]]>
<source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(max-width: 544px)">
<![CDATA[ sm scale: 0.5, 768px, max: 384px]]>
<source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(max-width: 768px)">
<![CDATA[ md scale: 0.125, 992px, max: 124px]]>
<source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(max-width: 992px)">
<![CDATA[ lg scale: 0.125, 1200px, max: 150px]]>
<source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(min-width: 992px)">
</video><![endif]-->
<img src="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif"
alt="Geigen3D_m_02.gif "
title=""
class="img-fluid m-b-1 " />
</picture>
</div>
</div>
<div class="clearfix hidden-sm-up"></div>
<div class="hidden-xs-down clearfix hidden-md-up"></div>
<div class="hidden-sm-down clearfix hidden-lg-up"></div>
<div class="hidden-md-down clearfix hidden-xl-up"></div>
<div class="hidden-lg-down clearfix"></div>
</div>
</div>
<div class="ce-bodytext">
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-xs-6">
<div class=" ">
<div id="c1165" class="">
<div class="ce-textpic ce-left ce-above">
<div class="" >
<div class="row">
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<div class="ce-media">
<!--next picture begins-->
<picture alt="image.gif">
and so on, and so on...
All solutions are welcome (pure css solution would be great tho), thank you for reading!
Here's a CSS-only solution using an approach similar to what you're starting with. I've simplified the HTML and CSS to focus on the important parts.
The General Idea
Layout your images as you desire. In this case I've used a <ul> element with <li> elements to hold the images, and laid them out horizontally.
Add a fadeIn animation to the images.
Now here's the key, add a animation-delay for each image, dependent on it's number in the lineup. The first will have no delay. The 2nd, a 3 second delay. The 3rd, a 6 second delay, and so on. This timing comes from the animation-duration of 3s. After the first image has faded in, the 2nd will fade in. After the 2nd has faded in, the 3rd will fade in, etc, etc.
Unknown Number of Images?
If the number of images is unknown this approach can still be used, though it will mean creating a few CSS styles that may never be used. You'll need to create:
li:nth-child(N) > img {
animation-delay: [animation-duration * N]s;
}
for the maximum number of images you think you'll have. So if you might have 100 images, and the animation-duration is set to 3s, you'll create 100 of those snippets, all the way through:
li:nth-child(100) > img {
animation-delay: 300s;
}
Demo
ul {
position: relative;
width: 100%
}
li {
float: left;
width: 25%;
}
img {
width: 100%;
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
li:nth-child(2) > img {
animation-delay: 3s;
}
li:nth-child(3) > img {
animation-delay: 6s;
}
li:nth-child(4) > img {
animation-delay: 9s;
}
li:nth-child(5) > img {
animation-delay: 12s;
}
li:nth-child(6) > img {
animation-delay: 15s;
}
li:nth-child(7) > img {
animation-delay: 18s;
}
li:nth-child(8) > img {
animation-delay:21s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<ul>
<li><img src="http://placehold.it/400?text=1" /></li>
<li><img src="http://placehold.it/400?text=2" /></li>
<li><img src="http://placehold.it/400?text=3" /></li>
<li><img src="http://placehold.it/400?text=4" /></li>
<li><img src="http://placehold.it/400?text=5" /></li>
<li><img src="http://placehold.it/400?text=6" /></li>
<li><img src="http://placehold.it/400?text=7" /></li>
<li><img src="http://placehold.it/400?text=8" /></li>
</ul>
Here's the same demo on Codepen.
My proposal is to add an animation delay to every img (div in my example) increasingly. divs start with opacity:0; , attached in a class in this case, then we need some JavaScript to remove that opacity property once the animation has finished.
$('div').on('animationend', function() {
$(this).removeClass('initial');
})
.initial {
opacity: 0;
}
div {
width: 100px;
height: 100px;
background: pink;
border: 1px solid;
float: left;
animation: fadein 6s;
-moz-animation: fadein 6s;
/* Firefox */
-webkit-animation: fadein 6s;
/* Safari and Chrome */
-o-animation: fadein 6s;
/* Opera */
}
div:nth-child(1) {
animation-delay: 0s;
}
div:nth-child(2) {
animation-delay: 6s;
}
div:nth-child(3) {
animation-delay: 12s;
}
div:nth-child(4) {
animation-delay: 18s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="initial"></div>
<div class="initial"></div>
<div class="initial"></div>
<div class="initial"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am making a website for a friend but since I'm still a beginner at this I'm not sure how to proceed. I'm making a simple intro page with his name and an enter button. The enter button has a hover function that when you hover your mouse over it it changes color, meanwhile I have a background div loop that iterates through 5 different backgrounds. My button and its hover function work fine on the first background picture, but once it changes the hover function no longer works until it comes back to that very first picture.
The background changing is a css code I found here on stack while I made everything else.
Here's My Code with what I'm working with.
Any ideas why the button hover isn't working on all the backgrounds?
HTML
<body class="intro-body">
<div id="background-change">
<div class="background-image image1">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image2">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image3">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image4">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
<div class="background-image image5">
<h1 class="intro-title">Name Here</h1>
<p class="intro-button intro-button-hover">Enter</p>
</div>
</div>
</body>
CSS
.intro-body {
text-align: center;
background-repeat: no-repeat;
background-position: center;
}
.intro-title {
padding-top: 20vh;
padding-bottom: 5vh;
font-size: 650%;
text-transform: uppercase;
text-align: center;
color: white;
letter-spacing: 5px;
text-shadow: 2px 2px black;
}
.intro-button {
border: solid;
color: white;
padding: 20px 45px;
display: inline-block;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
p.intro-button-hover:hover {
background-color: white;
opacity: 0.85;
padding: 23px 48px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
color: black;
border: unset;
cursor: pointer;
}
.background-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.image1{
background: url("http://placekitten.com/1200/1200") no-repeat center fixed;
}
.image2{
background: url("http://placekitten.com/1200/1300") no-repeat center fixed;
}
.image3{
background: url("http://placekitten.com/1300/1200") no-repeat center fixed;
}
.image4{
background: url("http://placekitten.com/1300/1300") no-repeat center fixed;
}
.image5{
background: url("http://placekitten.com/1300/1400") no-repeat center fixed;
}
#keyframes backgroundchangeFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes backgroundchangeFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#background-change div:nth-of-type(1) {
animation-delay: 20s;
-webkit-animation-delay: 20s;
}
#background-change div:nth-of-type(2) {
animation-delay: 15s;
-webkit-animation-delay: 15s;
}
#background-change div:nth-of-type(3) {
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
#background-change div:nth-of-type(4) {
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
#background-change div:nth-of-type(5) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
#background-change div {
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 25s;
-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 25s;
}
Just update with the following code, I have just added internal js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "white");
});
$("p").mouseout(function(){
$("p").css("background-color", "");
$("p").css("color", "black");
});
});
And remove the properties with '//' in the css:
p.intro-button-hover:hover {
// background-color: #fff;
//opacity: 0.4;
padding: 23px 48px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
//color: black;
border: unset;
cursor: pointer;
}
Quickly looking at this, the reason for it is that you actually have 5 different buttons fading in and out, which messes things up.
Do something like this (pseudocode)
<body class="intro-body">
<div id="callout">
<h1 class="intro-title">Name Here</h1>
<button class="intro-button intro-button-hover">Enter</button>
</div>
<div id="background-change">
<div class="background-image image1"></div>
<div class="background-image image2"></div>
<div class="background-image image3"></div>
<div class="background-image image4"></div>
<div class="background-image image5"></div>
</div>
</body>
Naturally position the callout section over the background image and you're good to go.
I have gone through your code and tried debugging the problem. The problem is mostly from your animation code. Try rewriting your animation code. I have tested it removing the animation code, to check if the hover is working properly or not, and it works fine. There is also a bug with your animation code which makes the Enter button disappear for a while after the first animation iteration and appear again after few seconds.
If possible try using JQuery, as it makes your job easier for using animations. For example, can simply use fadeIn(); and fadeOut(); functions for the animation you have been doing in your CSS animation code.
I have 3 boxes within a fluid container.
Each box has a heading title, an icon and some text below.
On :hover I want the icon to move to the top of the <div> and change it's size, I have managed to "achieve" it but using certain number of pixels.
That will not work in mobile resolutions if the title text is longer and takes 2 lines.
Here is what I have done so far:
Fiddle here
HTML
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
<div class="service-box">
<h2>Title</h2>
<i class="fa fa-5x fa-paper-plane wow bounceIn market-icon" data-wow-delay=".1s"></i>
<p class="">Certain text below the icon</p>
</div>
</div>
</div>
CSS
.container{
text-align:center;
}
.market-blocks{
background: #3aa0d1;
padding: 30px 0 30px 0;
cursor:pointer;
}
.orange{
background: #e97d68;
}
i.market-icon {
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in
}
.market-blocks:hover i.market-icon {
-webkit-transform: translate(0,-70px);
-moz-transform: translate(0,-70px);
-o-transform: translate(0,-70px);
-ms-transform: translate(0,-70px);
transform: translate(0,-70px);
font-size: 1.8em;
}
How can I do it? And also is there a better way to do the movement from the initial position to the top of the <div>?
Pure HTML/CSS solution:
.container {
text-align: center;
}
.market-blocks {
background: #3aa0d1;
padding: 30px 0;
cursor: pointer;
}
.orange {
background: #e97d68;
}
.service-box {
display: inline-block;
}
.service-box-header {
position: relative;
}
.market-title {
padding-bottom: 5em;
-webkit-transition: 1s ease-in;
transition: 1s ease-in
}
.market-icon {
position: absolute;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: 1s ease-in;
transition: 1s ease-in
}
.market-blocks:hover .market-title {
padding-bottom: 0;
}
.market-blocks:hover .market-icon {
bottom: 100%;
font-size: 1.8em;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
<div class="service-box">
<div class="service-box-header">
<h2 class="market-title">Very-very-very-very-very-very-very-very loooooooooooooooooooong title</h2>
<i class="fa fa-5x fa-paper-plane wow bounceIn market-icon"></i>
</div>
<p class="">Certain text below the icon</p>
</div>
</div>
</div>
</div>