Develop Reference

How to create running text (marquee) using CSS

I face quite big stuck while studying CSS animation.
I'm going to make a "transform: translate" animation which shows text that overflow content width like below situation.
How it works?: (Youtube video link)
var div1 = document.getElementById("div1");
var cont = document.getElementById("content");
var inf = document.getElementById("inf");
inf.innerHTML = "<p> Does the text inside h1 cut off? : " + (cont.offsetWidth < cont.scrollWidth) +
"<br><b>Length of text overflow</b>: " + (cont.offsetWidth - cont.scrollWidth) +
"<br> h1 width: " + (cont.offsetWidth) + ", h1's text length: " + (cont.scrollWidth) + "</p>";
div1.style.backgroundColor = "#A13DAF";
cont.style.webkitAnimationName = "moving";
cont.style.animationName = "moving";
cont.style.animationDuration = "3s";
cont.style.webkitAnimationDuration = "3s";
cont.style.animationTimingFunction = "linear";
cont.style.webkitAnimationTimingFunction = "linear";
#div1 {
margin: 10px;
width: 300px;
background: rgb(40, 40, 40);
white-space: nowrap;
overflow: hidden;
}
#content {
color: white;
width: 100%;
/* animation-name: moving;
animation-duration: 3s;
animation-timing-function: linear;
-webkit-animation-name: moving;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear; */
}
#keyframes moving {
0% {
transform: none;
-webkit-transform: none;
}
65% {
/*below code is pseudo code, It doesn't work,
It is an explanation of the direction I want but.. I can't find way to ...ㅠㅠ*/
transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
-webkit-transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
/*below value is caculated value of fixed text length and content width,
but if either of these changes, this code will not be available for my purpose.
Is there any way to specific values of CSS elements?*/
transform: translate( -668px, 0);
-webkit-transform: translate( -668px, 0);
}
100% {
transform: translate( -668px, 0);
-webkit-transform: translate( -668px, 0);
}
}
<div id="div1">
<h1 id="content">
The only thing that matters now is everything You think of me
</h1>
</div>
<div id="inf"></div>
Like Above code,
I want to make the text to move left in the content (h1), as much as the amount of the cut off cause of its overflow.
But, I can't find a way to refer values of content in CSS.
Is there any way to modify a CSS value by referring to a specific value of another element in the CSS without JavaScript?
I try to avoid the method of changing the keyframe using Javascript as much as possible, though it can be quite heavy.
Thank you very much.

You could animate both transform and simultaneously the margin-left so that the animation will end exactly at the text-end:
.marquee {
position: relative;
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee span {
display: inline-block;
min-width: 100%; /* this is to prevent shorter text animate to right */
white-space: nowrap;
font-size: 2.5em;
animation: marquee 4s ease-in-out forwards;
}
#keyframes marquee {
from {transform: translateX(0); margin-left: 0;}
to {transform: translateX(-100%); margin-left: 100%; }
}
<h1 class="marquee">
<span>The only thing that matters now is everything You think of me</span>
</h1>
<p class="marquee">
<span>Beware of short texts!</span>
</p>

Here is another idea with only transform used as animation:
.marquee {
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee > span {
display:block;
animation: marquee 4s ease-in-out;
transform: translateX(100%);
}
.marquee > * > span {
display: inline-block;
min-width: 100%;
white-space: nowrap;
font-size: 2.5em;
animation:inherit;
transform: translateX(-100%);
}
#keyframes marquee {
from {
transform: translateX(0);
}
}
<h1 class="marquee">
<span>
<span>The only thing that matters now is everything You think of me</span>
</span>
</h1>
<h1 class="marquee">
<span>
<span>The only thing that matters now is everything</span>
</span>
</h1>
<p class="marquee">
<span>
<span>Beware of short texts!</span>
</span>
</p>

Best way to make a 2 column layout that works with multiple resolutions?

I've asked this a couple times but seems like I didn't word it quite right so will try do better here,
I'm trying to make a 2 column layout in HTML, CSS, & Java, what I want is the text on the left to center in the middle of both columns once the resolution is too low (by this I mean the columns look great in 1920x width and 1600x width, but when it gets down to 1200x800 the text breaks past the height of the right image).
I've seen a website that once the page width hits a certain point (around 1200x width) the text in the left column snaps to center in the middle of both, which results in the page looking good at all res. I have a feeling the text is overlayed on top of both columns with a java snippet that tells the text to move into the center at a certain width, only problem is I don't know how to achieve that,
I've attached my code at the bottom but in my version the text is inside the left column, am I right thinking that the text is probably on-top of both columns? and is there a javascript to tell the text to move center at a certain width? would really appreciate any help!
HTML:
<div class="content1">
<div class="column1 animation fadeInUp">
<div class="title1">
<h3>STATEMENT</h3> .
<h2>Title of Some Sort.</h2>
<div class="blue-line"></div>
</div>
<p1>Paragraph text.<br></p1>
<button class="svg1">FORUM</button>
<button class="svg2">SIGN UP</button>
</div>
<div class="column2">
<div class="column2pic"></div>
</div>
</div>
CSS:
.content1 {
display: flex;
margin-left:100px;
margin-right:0px;
}
.column1 {
display:inline-block;
flex: 31%;
padding-bottom: 0px;
padding-right:50px;
opacity: 0; animation-play-state: paused;
}
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-play-state: running;
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2.5rem, 0);
transform: translate3d(0, 2.5rem, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
.column2 {
flex: 50%;
padding-bottom: 0px;
padding-left:100px;
padding-top:0px;
width:50vw;
}
.column2pic {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0,
0.0)), url(../Assets/Images/Content1pic);
background-size:cover;
z-index: 100;
width:50vw;
height:600px;
}
NOTE: the animation is just a simple effect for the left text to fade up, but don't mind if anyone excludes that part to keep it simple.
Let me know if you have any ideas! Thanks!

You will need to use css #media. In your case, you will have to create #media only screen and (max-width: 1200px) with the style that you would like at this size. See below an example of it. I put the width to 400px to fit with this snippet. When you resize the browser window under 400px #media only screen and (max-width: 400px), it lowers the text size font-size: 20px; and align it in the center text-align: center;.
#mypic {
width: 100%;
max-width: 560px;
height: 350px;
background-image: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350");
font-size: 50px;
}
#media only screen and (max-width: 400px) {
#mypic {
font-size: 20px;
text-align: center;
}
}
<div id="mypic">My Title In Picture!</div>

JS animation spin on hover

This is my first question on stackoverflow.
Wondering if anyone can point me to a solution/resource on animating buttons using JS/JQuery.
Particularly, the animation I can't figure out is spinning a circular button 180 degrees on hover.
Thanks :)

You can use css keyframes
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 1s infinite; /* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
/* Standard syntax */
#keyframes mymove {
from { transform: rotateY(0deg);}
to { transform: rotateY(360deg);
}

you can animate buttons using CSS.
At http://www.w3schools.com/css/css3_animations.asp you can learn about CSS animations. You may also want to learn about CSS transitions at http://www.w3schools.com/css/css3_transitions.asp. If you what to create an animation using JS what you would do is set a CSS transition on the HTML element that you want to animate and then use JS to set CSS properties like background-color and transform. You can access the CSS of an element using element.style.property. replace property with the property you want to change or add.

The most intuitive answer I found was this:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
/*CSS entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Further explanation can be found here: https://davidwalsh.name/css-flip

Animate marginLeft to element's -width

I have element with long inline text and want to make animation that will move this text from off-screen right (whole text behind right border of window) to the left off-screen.
My idea is to move element by setting margin-left to minus(width) of element:
var element = $(this);
$("p").animate({
'marginLeft': - element;
}, 4000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>
But this does not work. Any ideas?

In that context, as far as I can tell, $(this) is the window. You want to animate the $("p") itself, and you need to specify you're animating based on it's width, not the general DOM element. There also was a rogue ; in your object that you were sending to the animate function (you can see errors like this in your Developer Tools Console).
var $element = $("p");
$element.animate({
'marginLeft': -($element.outerWidth())
}, 4000);
body {
margin: 0;
font-family: sans-serif;
font-size: 12px;
overflow-x: hidden; /* no horizontal scrollbar */
}
p {
white-space: nowrap;
background: #ccc;
display: inline-block;
margin-left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>
EDIT
Or, here it is with pure CSS. This is the more effective route to take, if the browsers you're developing for support it. It causes the browser to "repaint" less, and runs on the GPU instead of CPU like JS does.
body {
margin: 0;
font-family: sans-serif;
font-size: 12px;
overflow-x: hidden; /* no horizontal scrollbar */
}
#-webkit-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#-moz-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#-o-keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
#keyframes offscreenLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
p {
white-space: nowrap;
background: #ccc;
display: inline-block;
padding-left: 100%; /* translate uses the inner width of the p tag, so the thing pushing it offscreen needs to be *inside* the p, not outside (like margin is) */
-webkit-animation: offscreenLeft 4s forwards; /* Safari 4+ */
-moz-animation: offscreenLeft 4s forwards; /* Fx 5+ */
-o-animation: offscreenLeft 4s forwards; /* Opera 12+ */
animation: offscreenLeft 4s forwards; /* IE 10+, Fx 29+ */
}
<p>element with long long long long inline text....</p>

If I were you, I would toggle a class on the element and using CSS's transform: translateX() combined with transition to move the element off screen.
codepen
css
p {
transform: translateX(0);
transition: transform 0.3s ease;
}
p.off-screen-right {
transform: translateX(100%)
}
js
$(document).ready(function () {
$('button').click(function () {
$('p').toggleClass('off-screen-right')
})
})

Steps
Get the <p> width and save it in a variable.
Then, sets the initial margin-left to the $(window).width()
After that, you can call the animate function to set the margin-left to the negative value of the width you've saved in the variable initially
Working code
$(function() {
var width = $("p").width();
$("p")
.css('margin-left', $(window).width())
.animate({ 'margin-left': -width }, 4000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>element with long long long long inline text....</p>

Avoid container's overflow scrollbars with "enter from side" effect

I'm working on a one/single page scroll website. I have a couple of sections each one containing 2 columns and I'm trying to make them to enter from the left/right with a fade effect. I'm using CSS transforms and jquery to activate the effect only when the user scrolls and reachs its corresponding section. Here's an example:
http://jsfiddle.net/Rv35g/
(Resize your window so it fits the container's width)
HTML:
<div class="container animation-init">
<div class="left">Column 1</div>
<div class="right">Column 2</div>
</div>
CSS:
body, html{
margin: 0;
height: 100%;
}
.container{
width: 600px;
height: 100%;
margin: 0 auto;
background: green;
}
.container .left, .container .right{
width: 50%;
float: left;
color: white;
height: 100%;
}
.container .left{
background: red;
}
.container .right{
background: blue;
}
.container.animation-init .left, .container.animation-init .right{
opacity: 0;
}
.container.animation-init .left{
-webkit-transform: translate(-80px, 0);
-moz-transform: translate(-80px, 0);
transform: translate(-80px, 0);
}
.container.animation-init .right{
-webkit-transform: translate(80px, 0);
-moz-transform: translate(80px, 0);
transform: translate(80px, 0);
}
.container.animation-init.animation-ready .left, .container.animation-init.animation-ready .right{
opacity: 1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 1s;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
JS:
$(function() {
$('.container').addClass('animation-ready');
});
The problem is that when my columns are on its initial position they generate horizontal scrollbars because they're going outside the container... Do you have any idea on how could I handle this? I can't use overflow: hidden; cause I'll be cutting part of the animation. I also tried to put overflow-x: hidden; to the html tag but since the effects only activate when you reach its corresponding section the overflow stills being a problem specially on mobile devices...
EDIT: The problem with overflow-x: hidden is that the extra space stills there, so when scrolling with your finger or mousewheel-click arrow function it's possible for you to end up in one of those blank spaces losing the center of the page. Also, in mobile devices, it takes this overflow as part of the general width, so If I have and element coming from -200px to the left, it'll show the container's width + the aditional 200. That's a problem, specially when it comes to the elements positioned at the bottom of the page, cause they're on their init position waiting for you to reach them to start the animation. In the example I posted the overflow disappears almost instantly cause the animation is being triggered automatically, but as I told you at the begining, I have multiple sections where the column's animation starts only if you reach their parent sections.