I incorporated Bootstrap on my site to make it responsive. I also added in CSS animation to my code. However, this takes the text from being in the center of the page, to starting on the far left of the page, finishing the animation, and then shifting the text to the center.
How do I start the animation in the center itself?
Bootstrap Code:
<header id="top" class="header">
<div class="text-vertical-center">
<h1 class="typing">Hi, welcome to my website.</h1>
<h3 class="typing">Let's get started.</h3>
<br>
Let's Get Started.
</div>
</header>
CSS Code:
.css-typing
{
width: 100%;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 3s steps(50, end);
animation: type 3s steps(50, end)1;
}
#keyframes type{
from { width: 0; }
}
#-webkit-keyframes type{
from { width: 0; }
}
Any thoughts or help would be awesome.
Thanks!
Related
I would like to ask if you can show me how to make the "scroll tape bar" (I don't know the correct term for this object) that is in this store: https://thefutureofficial.eu/
"scroll tape bar here"
Thanks a lot guys.
Simone.
Use following Snippet to achieve this effect. You can style the text as per your choice.
.main {
background:#000;
padding:0.5rem;
overflow: hidden;
}
.text {
color:white;
animation : slide 10s linear infinite;
}
.gap{ margin-right:100px;}
#keyframes slide {
0% {
transform: translateX(100%)
}
100% {
transform: translateX(-100%)
}
}
<div class="main">
<div class="text">
<span class="gap">Text</span>
<span class="gap">Text</span>
<span class="gap">Text</span>
<span class="gap">Text</span>
</div>
</div>
does anybody know why the transition is working when I first click the button, then the text disappears after 2s. But it should also show up after 2sek when i click the button again after the text has been hidden. But when I click it, the text appears immediately.
HTML:
<div class="container">
<button class="button">Hit me</button>
<div class="wrapper">
<div class="title-bar">This is the title</div>
</div>
</div>
CSS:
.container .title-bar {
visibility: visible;
-webkit-transition: visibility 2s;
transition: visibility 2s;
}
.container.fixed .title-bar {
visibility: hidden;
-webkit-transition: visibility 2s;
transition: visibility 2s;
}
JS:
$('.button').click(function() {
if ($('.container').hasClass('fixed')) {
$('.container').removeClass('fixed');
} else {
$('.container').addClass('fixed');
}
});
I created a pen for this:
https://codepen.io/anon/pen/QqeNrW
Thanks!
From the docs:
visibility: if one of the values is visible, interpolated as a discrete step where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is visible then not interpolable.
So, the visibility is going , so to say, from 0 to 1, and in the intermediate steps will be some value between 0 and 1.
But, all the fractionary values are mapped to visible, and this produces the effect that you see.
Instead of the setting a transition-duration, set a transition-delay and it will work as expected
$('.button').click(function() {
if ($('.container').hasClass('fixed')) {
$('.container').removeClass('fixed');
} else {
$('.container').addClass('fixed');
}
});
.container .title-bar {
visibility: visible;
-webkit-transition: visibility 2s;
transition: visibility 0s 2s;
}
.container.fixed .title-bar {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="button">Hit me</button>
<div class="wrapper">
<div class="title-bar">This is the title</div>
</div>
</div>
I just want to basically show text and hide, then next text and hide, then last text and hide and repeat. How can I do this? I've been looking at code but I'm still lost. Any help is greatly appreciated!
My Code :
<style>
#myArea {
height:250px;
width:300px;
position:relative;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>
It is fairly simple to achieve the effect that you are looking for. All that is needed is for you to place the images absolutely on top of each other and then add an animation which changes the opacity of the image (or its container) accordingly.
The key parts when animating multiple elements in a loop are to
make sure that the animation of the second and subsequent elements start after all the previous elements have completed their animation and
make sure all the previous elements stay in the final state until the other elements complete their animation (otherwise they will mess up the animation).
The first part can be achieved by using progressive animation-delay on elements while the second part is achieved by setting the #keyframes accordingly. Here, since there are 3 images, animation of each of them should be completed at 33% mark itself (because during the other 66%, the other 2 will be executing their animation). The state as at 33% should be maintained till 100%.
(If you have 4 images, it should complete at 25% and so on.)
#myArea {
height: 250px;
width: 300px;
position: relative;
}
.text {
position: absolute;
z-index: 1;
bottom: 20px;
left: 10px;
opacity: 0;
animation: fade-in-out 9s ease backwards infinite 1s; /* initial delay is for image to load */
}
.text:nth-of-type(2) {
animation-delay: 4s; /* this must start after first has faded-out */
}
.text:nth-of-type(3) {
animation-delay: 7s; /* this must start after second has also faded-out */
}
#keyframes fade-in-out {
0% {
opacity: 0;
}
11%, 22% {
opacity: 1;
}
33%, 100% {
opacity: 0;
}
}
<div id="myArea">
<img src="http://lorempixel.com/300/250/abstract/2" />
<div id="txt1" class="text">
<img src="http://lorempixel.com/200/200/animals/1" />
</div>
<div id="txt2" class="text">
<img src="http://lorempixel.com/200/200/animals/2" />
</div>
<div id="txt3" class="text">
<img src="http://lorempixel.com/200/200/animals/3" />
</div>
</div>
Are you probably looking for the steps timing-function? It provides a gif-like way to animate an image set!
there is an example: https://jsfiddle.net/simurai/CGmCe/
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
Hope it helps!
I am needing to fadeIn a list of text and then fade each one out individually using css. Here is an example I did using javascript. Any help would be appreciated. I have read some examples of how to animate stuff with css but do not know the best practices or anything to complex.
I am thinking I need to create a wrapper div with a overflow of hidden and a separate div with all the text that is position absolute in the wrapper. Then animate the .text div up or down to show the text. I have no experience with css animations.
Here is what I want to do but with css not javascript:
http://jsfiddle.net/trav5567/8ejqsywu/
Here is my javascript:
var quotes = $(".whoiam").find('h2');
var quoteIndex = -1;
quotes.hide();
function showNextQuote() {
++quoteIndex;
console.log(quoteIndex);
if(quoteIndex === quotes.length){
console.log($(this));
//console.log('index greater than or equal to h2 length');
//$(this).fadeIn('200');
}else{
console.log('Kepp going');
quotes.eq(quoteIndex % quotes.length)
.fadeIn(500)
.delay(500, checkIndex(quoteIndex,quotes.length))
.fadeOut(500, showNextQuote);
}
}showNextQuote();
function checkIndex(index, length){
var length = length-1
if(index === length){
console.log('check good');
end();
}
}
Here is my HTML:
<div id="splash-wrapper">
<div class="row">
<div class="small-12 columns">
<h1>Travis M. Heller</h1>
<div class='whoiam'>
<h2>Front End Developer</h2>
<h2>Illustrator</h2>
<h2>Web Master</h2>
<h2>Front End Developer</h2>//This value will be the last to show on loop.
</div>
<button class="btn center gotoPortfolio">ENTER</button>
</div>
</div>
</div>
An experiment with just css animations: http://jsfiddle.net/8ejqsywu/6/
There is one animation which moves the text list verticaly, and another which fades in and out the text. The difficulty was to synchronize them!
#container{
overflow:hidden;
height:48px;
}
.whoiam{
-webkit-animation: move;
position:relative;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: step-start;
-webkit-animation-delay: 0.5s
}
h2{ height:48px;margin:0;padding:0}
#-webkit-keyframes move {
0% { margin-top: 0em; }
25% { margin-top: -48px; }
50% {margin-top: -96px;}
75% {margin-top: -144px; }
100% {margin-top: 0;}
}
h2{
-webkit-animation: fade;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
what I would like is to make my site menu switching between panel and classic horizontal menu.My goal is to change the site menu depending on the screen size (desktop/mobile)... but it is another story!
I have the following working solution (http://jsfiddle.net/998HD/2/):
HTML
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
Panel
</div>
<div id="pnl" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div data-role="content">Lorem ipsum</div>
</div>
CSS
.menu.ui-panel {
position: relative;
width: 100%;
min-height: 0
}
.menu.ui-panel .ui-li {
display: inline-block;
margin: 0;
border: 0
}
JS
$('#lnkpnl').click(function() {
var menu = 1; // 0 = panel, 1 = horizontal
if (menu) $('#pnl').addClass('menu').insertAfter('.ui-header');
$('#pnl').panel('open')
})
JQuery Mobile moves #pnl panel after the header and content and this prevents me from simply apply:
.menu.ui-panel {
position: static
/*... other props ...*/
}
and avoid line 1 and 2 in javascript code.
So, I ask you. Is my solution the best? Is there a pure css solution?
Many thanks.
You are right on point. There is a way to do this with transition CSS. I included a Fiddle to show you, but it is jquery assisted. Then again, this is a very light JS call so it shouldn't toruble your application. Then again, neither is yours. So you are good either way.
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
Hope it helps
FIDDLE