I am making a marquee in Javascript and CSS that displays various notifications.
Right now, I am using Javascript to update the transform: translateX() on a specified interval.
Here's a codepen of what I have working so far.
I would like to have the marquee wrap around so that there is always text present on the screen. Currently, it does not wrap around until everything has disappeared.
I have found a similar example (using CSS keyframes) that seems to have solved this issue by including the marquee text twice in a row. I would prefer not to have to do this if at all possible, as the marquee won't be text when live, but rather a bunch of icons and other elements, and that could get messy.
You have to have the text twice to achieve the effect you are looking for. The codepen you reference controls the widths so that both texts are never in the visible marquee simultaneously. Here is another example that does this by tying the width of the outer div to the width of the inner div with jQuery, and uses white-space: nowrap. I didn't write this codepen, BTW.
HTML
<div id="maindiv">
<div id="div1">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
<div id="div2">
Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
</div>
</div>
CSS
#maindiv{
border: 2px solid black;
overflow: hidden;
white-space: nowrap;
}
#div1 {
display: inline-block;
animation: marquee 10s linear infinite;
}
#div2 {
display: inline-block;
animation: marquee2 10s linear infinite;
animation-delay: 5s;
}
#keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
#keyframes marquee2 {
from {
transform: translateX(0%);
}
to {
transform: translateX(-200%);
}
}
jQuery
$('#maindiv').width($('#div1').width());
Related
Please note: I am pretty new to CSS so I may use incorrect terminology or awkward descriptions. Also, my usage of the hover psuedo-class is simply to make it easy to demonstrate in my examples. I am NOT using any psuedo-class in my actual code.
The following snippet is a very simple CSS transition that I am applying to some text. It works exactly as I want it to except that in order to invoke the transition/animation I have to use JavaScript to manually add the effect class to the element.
.effect:hover {
transform-origin: left top;
transform: scale(.5, .5);
transition: transform 1s;
}
<div>
<span style="display: inline-block; font-size: x-large;" class="effect">HOVER OVER THIS</span>
</div>
I would much rather implement this transition/animation effect without having to write any JavaScript if possible. So I wrote the below snippet that is invoked immediately when the CSS interpreter evaluates the animation property:
.effect:hover {
animation: 1s shrink forwards;
}
#keyframes shrink {
to {
transform-origin: left top;
transform: scale(.5, .5);
}
}
<div>
<span style="display: inline-block; font-size: x-large;" class="effect">HOVER OVER THIS</span>
</div>
After running both of these snippets and comparing the result you should immediately see the problem I am having. The animation in the second snippet is adding something extra to the movement of the text as it shrinks... It's almost like a "curving" motion. Not sure how else to describe it.
Does anyone know what is going on here and how I can eliminate this "curving" behavior?
This is because the default transform-origin is 50%, 50% 0 (x-axis, y-axis, z-axis). So right now the transform-origin moves from 50%, 50% 0 to top left 0 causing the element to "curve inwards" while scaling down.
Try this:
.effect {
transform-origin: left top;
}
.effect:hover {
animation: 1s shrink;
}
#keyframes shrink {
from {
transform: scale(1, 1);
}
to {
transform: scale(.5, .5);
}
}
<div>
<span style="display: inline-block; font-size: x-large;" class="effect">HOVER OVER THIS</span>
</div>
Here's an example of what I am trying to recreate: https://www.hioscar.com/get-quote/
When a user has finished entering information into the input area or selected an option the current line will animate (using translate & opacity, I believe) and the next line will come into view.
I've started something very basic just to get a feel for how it's meant to work using on hover but I'm not sure on how to complete replicate this animation in my own form.
div {
margin-top: 500px;
}
div:hover {
transform: translate(0px, -300px);
opacity: 0.3;
transition: opacity 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>
So you had several problems, you were only animating opacity and if you move the div from under the mouse cursor when you hover it, it won't work.
So I activated all transitions, not just opacity, made the div as tall as the browser, and used the div's internal padding.
body, html {
/* needed so that the div can also be 100% of window */
height: 100%;
}
div {
height: 100%;
padding-top: 500px;
}
div:hover {
padding-top: 300px;
transition: all 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>
On my webpage I have a div. On that div I have "animation" that simulates the div being turned over (flipped).
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
I rotate the "wrapper" div with the jQuery plugin transit. What the plugin does is just apply the CSS;
transform: rotateY(180deg);
When the div is on rotateY(90deg), I have to load some new content in the #content div. This takes a minuscule amount of time, but in the animation you can see that the div is gone/hidden fore that time.
SEE DEMO FIDDLE
(note that I don't have the actual content loading in here)
Is it possible to have the dive not totally disappearing when rotateY(90)?
Unfortunately I have no control over the HTML itself because it is being generated.
Try to add thickness to it. Refer to something like this: want to show the thickness of an element while it rotate
But make the animation of the css:
0%: transform: rotateY(0deg);
50%:transform: rotateY(90deg);
100%:transform: rotateY(180deg);
Hope this helps.
Make sure the jQuery plugin has css files or look into it.
And also you could do this using basic css and jQuery.
Don't change the contents of the div, just create two sides:
<div id="wrapper">
<div class="side-a">
Some content
</div>
<div class="side-b">
Some content
</div>
</div>
CSS:
#wrapper{
transition: all 2s;
position: relative;
}
#wrapper.flip{
transform: rotateY(180deg);
}
.side-a{
z-index: 1;
opacity: 1;
position: absolute;
height: 100%;
transition-delay: 1s; //half the transition time of the wrapper
}
.side-b{
z-index: 0;
opacity: 0;
transform: rotateY(180deg);
position: absolute;
height: 100%;
transition-delay: 1s;
}
.flip side-a{
z-index: 0;
opacity: 0;
}
.flip side-b{
z-index: 1;
opacity: 1;
}
Javascript:
$('.next-slide').click(function(){
$('#wrapper').addClass('flip');
});
$('.prev-slide').click(function(){
$('#wrapper').removeClass('flip');
});
On my website I have two links, if you click on portfolio, the div portfolio becomes visible.
I use this code to switch between them <a href="" onclick="return show('portfolio','profile');">
How can I make a quick fade-in-out between the divs using CSS?
Visit my site here and you'll see.
I've created a small demo for you to look at and have an idea of what AlexG is suggesting in Option 1 using CSS Animations (and jQuery).
JSFiddle
CODE SNIPPET:
var vHome = $("#home"),
vPortfolio = $("#portfolio"),
bTriggerHome = $("#trigger-home"),
bTriggerPortfolio = $("#trigger-portfolio");
function switchView() {
vHome.add(vPortfolio).toggleClass("hide-view");
};
bTriggerHome.add(bTriggerPortfolio).on("click", function() {
switchView();
});
#home,
#portfolio {
height: 500px;
animation: fadeInUp 1s both;
}
#home {
background-color: tomato;
}
#portfolio {
background-color: royalblue;
}
.hide-view {
display: none;
}
#keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">
<button id="trigger-portfolio">
Switch View
</button>
</div>
<div id="portfolio" class="hide-view">
<button id="trigger-home">
Switch View
</button>
</div>
You set your invisible divs to display: none. Thus, standard CSS transitions won't work out of the box.
display: none is a good idea because the browser won't spend time rendering that markup at all. However, CSS transitions need a hack to work with an element that move from display: none to display: !none, so you have two options:
1) Just use CSS Animations instead; add/remove a class to the elements that contain a CSS animation definition and it will play straight away.
2) Set your invisible divs to height: 0 and opacity: 0; and transition to opacity: 1 using a regular CSS transition (often triggered by a class change)
I have a row of 4 divs that are floated left. On click, the div disappears and its siblings move to the left and take up its position. However, I'm struggling with smoothing this animation since the remaining 'divs' just jump to their new position instead of sliding over
http://jsfiddle.net/G9x8V/
Is there any way to smooth out the transition, preferably without using specific values, ie: margin-left: x pixels;? Also, is it possible to do this with css transitions?
You can switch fadeOut() with hide()
Here is the updated fiddle
$(function(){
$('.box').on('click', function(){
$(this).hide(1000);
})
});
EDIT
One of the directions is to wrap boxes into invisible divs that will hide after the boxes fade out. Here is the updated fidle
HTML
<div class="container">
<div class="outer-box">
<div class="box">1</div>
</div>
<div class="outer-box">
<div class="box">2</div>
</div>
<div class="outer-box">
<div class="box">3</div>
</div>
<div class="outer-box">
<div class="box">4</div>
</div>
</div>
CSS
.container {
width: 600px;
}
.box {
width: 100%;
height: 120px;
background: red;
float: left;
}
.outer-box {
width: 20%;
height: 120px;
margin-left: 2.5%;
float: left;
}
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(1000, function(){
$(this).parents('.outer-box').hide(1000);
});
});
});
I'd go with Bojana's answer, but I'll give you another option, as I worked a little on it(it's not done, implementation isn't as easy as bojana's):
http://jsfiddle.net/G9x8V/4/
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {margin-left: 18%;}
25% {margin-left: 12%;}
50% {margin-left: 6%;}
100% {margin-left: 0%;}
}
And then you'd have to update the javascript so it occured on click, not on page load, and you might want to put in more points on that animation and switch to px.
Is this what you are looking for? Or do you actually want the blocks to slide along?
CSS3 Ease
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
JSFIDDLE
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(function() {
$(this).next().animate({'left': '0px'}, 1000).next().animate({'left': '27.5%'}, 1000).next().animate({'left': '50%'}, 1000);
});
})
});
JSFIDDLE jQuery