We Keep Coding

How to make sticky image swap text look better on mobile view?

I am a beginner and want to make this sticky image look better on mobile.
As you scroll, the image is in a fixed position and changes once it reaches a certain point and correlates with the related text.
However, it look good on desktop as a two column layout, but I want the text to span wider than it is on mobile.
Any help appreciated, thanks
https://jsfiddle.net/g67j5nLm
<div class="locker">
<div class="locker__image">
<div class="locker__container">
<img class="image image--1" src="https://assets.codepen.io/325536/placeimg_480_720_tech.jpg">
<img class="image image--2" src="https://assets.codepen.io/325536/tech.jpeg">
</div>
</div>
<div class="locker__content">
<div class="locker__section locker__section--1 cb" data-swap="image--1">
<h3>01</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="locker__section locker__section--2 cb" data-swap="image--2">
<h3>02</h3>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
.image {
opacity: 0;
transition: all .5s ease;
&.active {
opacity: 1;
}
}
.locker {
outline: 1px solid #cdcdcd;
outline-offset: -1px;
position: relative;
display: grid;
grid-template-columns: [full-start] minmax(4.2rem, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 8rem) [col-end]) [center-end] minmax(4.2rem, 1fr) [full-end];
&__image {
position: relative;
grid-column: col-start 2 / col-end 6;
img {
width: auto;
height: 70vh;
position: absolute;
transition: all 1s ease;
}
}
&__container {
position: sticky;
position: -webkit-sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
//background-color: #ccc;
}
&__content {
grid-column: col-start 8 / center-end;
}
&__section {
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
border-top: 1px solid #cdcdcd;
&:first-child {
border: none;
}
p {
width: 70%;
}
}
}
if(typeof window.IntersectionObserver !== 'undefined') {
let options = {
threshold: [0.5, 1]
}
const targets = document.querySelectorAll('.cb');
const locker = document.querySelector('.locker__container');
function handleIntersection(entries) {
entries.map((entry) => {
if (entry.isIntersecting) {
entry.target.current = entry.target.dataset.swap;
document.querySelector(".locker__container ." + entry.target.current).classList.add("active");
} else {
document.querySelector(".locker__container ." + entry.target.current).classList.remove("active");
}
});
}
const observer = new IntersectionObserver(handleIntersection, options);
targets.forEach(target => observer.observe(target));
} else {
// Fallback
}

Maintain angle of clip-path on viewport width and height changes

I am trying to create something similar to the example, where the angle of the clip path needs to remain the same on resizing. Both on height and width changes to the viewport. I have tried using calc(100% - 6vw) (as an example) but this doesn't maintain the exact angle.
The reason for this is I will have multiple elements that are required to have mirroring angles in a responsive environment.
Can this be achieved using CSS and calc alone, or is there a JS-based math solution to resolve it? I guess this is where trigonometry comes in and I believe what I need is the opposite side length being relative to the height of the adjacent/height of the content area (however, I failed maths...) to maintain the same angle.
Some work that I have done based on a mock-up I am working from. The angle (I think) I need to find is 14deg. I've based this on the adjacent being 899px and the opposite 229px.
Any help is much appreciated.
body {
margin: 0;
}
.slide {
background-color: red;
height: 100vh;
position: relative;
}
.slide_content {
background-color: blue;
padding: 50px 30px;
color: #fff;
position: absolute;
width: 70%;
left: 0;
bottom: 0;
clip-path: polygon(0 0, 90% 0, 102% 100%, 0% 100%);
}
.slide_content-top {
background-color: orange;
padding: 50px 30px;
color: #fff;
position: absolute;
width: 70%;
right: 0;
top: 0;
padding-left: 100px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
}
<div class="slide">
<div class="slide_content-top">
<h2>More content here</h2>
</div>
<div class="slide_content">
<h2>Some text goes here</h2>
</div>
</div>
Another Example
So how I would apply this is as follows - The shape in red is where text content would be placed. The area in blue is the right-angle triangle I need to create. The triangle would need to maintain it's ratio as the content area grows or shrinks. The base of this triangle (width: 85px in this example) would need to resize in proportion to the height of the content area (currently height: 200px).
The only values I would know are the acute angle between the hypotenuse and the adjacent (14deg), and the length of the adjacent would be calculated by getting it from the content area's current height.
.shape {
width: 400px;
height: 200px;
background-color: red;
position: relative;
}
.shape:after {
content: '';
position: absolute;
width: 85px;
height: 200px;
background-color: blue;
top: 0;
bottom: 0;
right: -85px;
clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);
}
<div class="shape"></div>
A further update
This is what I have achieved so far. Which I think does part of what I am looking for. Creates a right-angle that maintains to same ratio on resizing. However, I'm not entirely sure how robust this particular snippet I've created is.
function getTanFromDegrees(degrees) {
return Math.tan(degrees * Math.PI / 180);
}
function createRightAngleTriangle() {
const shapes = document.querySelectorAll('.shape');
shapes.forEach(shape => {
const shapeContent = shape.querySelector('.shape-content');
const shapeTri = shape.querySelector('.shape-tri');
const shapeHeight = shapeContent.offsetHeight;
const tan = getTanFromDegrees(14);
const getLength = Math.floor(tan * shapeHeight);
shapeTri.style.height = shapeHeight + 'px';
shapeTri.style.width = getLength + 'px';
})
}
window.addEventListener('load', createRightAngleTriangle);
window.addEventListener('resize', createRightAngleTriangle);
.shape {
display: flex;
align-items: flex-start;
}
.shape-content {
padding: 20px;
font-size: 22px;
}
.shape-tri {
background-color:green;
clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);
}
.shape-1 .shape-content {
background-color: red;
}
.shape-2 .shape-content {
background-color: blue;
}
<div class="shape shape-1">
<div class="shape-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aut deleniti dolor doloremque, nesciunt minus voluptatem! Voluptas odio obcaecati vitae?
</div>
<div class="shape-tri"></div>
</div>
<div class="shape shape-2">
<div class="shape-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aut deleniti dolor doloremque, nesciunt minus voluptatem! Voluptas odio obcaecati vitae? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, eos.
</div>
<div class="shape-tri"></div>
</div>

You can try like below. the value 0.25 is tan(14deg)
body {
margin: 0;
}
.slide {
background-color: red;
min-height: 100vh;
display:grid;
grid-auto-rows:1fr;
color: #fff;
}
.slide_content {
background: blue;
box-shadow: 200px 0 blue;
padding: 30px;
width: 70%;
margin-top:auto;
clip-path: polygon(0 0, 100% 0, calc(100% + 0.25*100vmax) 100vmax, 0 100vmax);
}
.slide_content-top {
background-color: orange;
box-shadow: -200px 0 orange;
padding: 30px;
width: 70%;
margin-left: auto;
margin-bottom:auto;
clip-path: polygon(calc(-0.25*100vmax) -100vmax ,100% -100vmax, 100% 100%, 0 100%);
}
<div class="slide">
<div class="slide_content-top">
<h2>More content here</h2>
</div>
<div class="slide_content">
<h2>Some text <br> goes here</h2>
</div>
</div>

Vertical positioning of divs is wrong

I am trying to make a portfolio and this is the code that is the same without the content:
$(document).ready(function() {
$('.nav-link').on('click', function() {
if ($(window).width() < 768) {
let section = $(".section#" + $(this).attr('id')).offset();
let scrollTop = $('#main-container').scrollTop() + section.top
$('#main-container').animate({
scrollTop: scrollTop
}, 500);
} else {
let section = $(".section#" + $(this).attr('id')).offset();
let scrollLeft = $('#main-container').scrollLeft() + section.left
console.log(scrollLeft);
$('#main-container').animate({
scrollLeft: scrollLeft
}, 500);
}
});
$(".container").scroll(function() {
if ($(window).width() < 768) {
let container = $(".container");
let container_height = container.height();
let pageSplit = 1 / $('.section').length
let profile_height = container_height * pageSplit;
let projects_height = container_height * pageSplit * 2;
let contact_height = container_height * pageSplit * 3;
if ($('.container').scrollTop() > contact_height + 20) {
$('.nav-link').removeClass('active');
$('.nav-link#contact').addClass('active');
} else if ($('.container').scrollTop() > profile_height && $('.container').scrollTop() < contact_height + 20) {
$('.nav-link').removeClass('active');
$('.nav-link#projects').addClass('active');
} else if ($('.container').scrollTop() < profile_height) {
$('.nav-link').removeClass('active');
$('.nav-link#profile').addClass('active');
}
} else {
let container = $(".container");
let container_width = container.width();
let pageSplit = 1 / $('.section').length
let profile_width = container_width * pageSplit;
let projects_width = container_width * pageSplit * 2;
let contact_width = container_width * pageSplit * 3;
console.log($('.container').scrollLeft());
console.log(projects_width);
if ($('.container').scrollLeft() > contact_width + 20) {
$('.nav-link').removeClass('active');
$('.nav-link#contact').addClass('active');
} else if ($('.container').scrollLeft() > profile_width && $('.container').scrollLeft() < contact_width + 20) {
$('.nav-link').removeClass('active');
$('.nav-link#projects').addClass('active');
} else if ($('.container').scrollLeft() < profile_width) {
$('.nav-link').removeClass('active');
$('.nav-link#profile').addClass('active');
}
}
});
});
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('main-container').scrollLeft -= (delta * 55); // Multiplied by 40
e.preventDefault();
}
if (document.documentElement.clientWidth >= 768) {
if (document.getElementById('main-container').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('main-container').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('main-container').addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('main-container').attachEvent("onmousewheel", scrollHorizontally);
}
}
function scroll() {
if (document.documentElement.clientWidth >= 768) {
if (document.getElementById('main-container').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('main-container').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('main-container').addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('main-container').attachEvent("onmousewheel", scrollHorizontally);
}
} else {
if (document.getElementById('main-container').removeEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('main-container').removeEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('main-container').removeEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('main-container').detachEvent("onmousewheel", scrollHorizontally);
}
}
}
/* For mobile phones: */
.container {
position: absolute;
height: 100%;
width: 100%;
background-color: #BEBAB7;
overflow: auto;
scrollbar-width: none;
white-space: normal;
}
* {
margin: 0;
}
html,
body {
background-color: #BEBAB7;
height: 100%;
font-family: sans-serif;
color: #77212E;
}
.container::-webkit-scrollbar {
display: none;
}
div.section {
display: inline-block;
height: 100%;
width: 100%;
}
.body {
margin-top: 25%;
margin-left: 25%;
width: 40%;
white-space: normal;
}
.section-pic {
width: 100px;
height: 100px;
margin-bottom: 25px;
border-radius: 100px;
border: 2px solid #77212E;
}
hr {
border-color: #77212E;
}
.github-logo {
width: 100px;
}
.nav {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 1000;
}
.nav-link {
margin: 5px;
cursor: pointer;
text-decoration: none;
position: relative;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}
.nav-link::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #77212E;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-link.active::after {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.container {
white-space: nowrap;
height: auto;
min-height: 100vh;
}
.body {
position: relative;
top: 50%;
margin: auto;
}
.section {
margin-top: 0;
height: 100vh;
}
.nav {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
transform: none;
}
.nav-link {
float: left;
margin: 5px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/nav.css">
</head>
<body onresize="scroll()">
<div class="nav">
<div class="nav-link active" id="profile">
Profile
</div>
<div class="nav-link" id="projects">
Projects
</div>
<div class="nav-link" id="contact">
Contact
</div>
</div>
<div class="container" id="main-container">
<div class="section" id="profile">
<div class="body">
<h1 class="heading" id="profile-heading"><img src="img/content/profile-pic.jpg" alt="Profile Pic" class="section-pic" align="middle"> Profile</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel euismod lorem, in condimentum leo. Nam a magna convallis, finibus odio at, tincidunt mi. Donec non erat varius, pulvinar sapien at, rhoncus lectus.
</div>
</div>
<div class="section" id="projects">
<div class="body">
<h1 class="heading" id="profile-heading"><img src="img/content/projects-pic.jpg" alt="Projects Pic" class="section-pic" align="middle"> Projects</h1>
orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel euismod lorem, in condimentum leo. Nam a magna convallis, finibus odio at, tincidunt mi. Donec non erat varius, pulvinar sapien at, rhoncus lectus. Vivamus accumsan quam at arcu accumsan
blandit. Aliquam quis dignissim sapien, a ullamcorper risus. Phasellus accumsan neque ligula, a dapibus neque vulputate at.
</div>
</div>
<div class="section" id="contact">
<div class="body">
<h1 class="heading" id="profile-heading"><img src="img/content/contact-pic.jpg" alt="Contact Pic" class="section-pic" align="middle"> Contact</h1>
<form action="">
<input type="email">
<input type="text">
<textarea></textarea>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/main.js" defer></script>
<script type="text/javascript" src="js/scroll.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
If you expand and shrink the result window, you can see that the page goes from a horizontal layout to a vertical layout (you have to click run when changing the layout to make the scrolling work, idk why it doesn't work in jsfiddle correctly). As you can see, if you scroll when the layout is horizontal, each 'section' of the page has a different vertical positioning. How do i make it so that the vertical positioning is at the top of the page for each section?

(Here is the fiddle of question codes: http://jsfiddle.net/6902zwjg/1/)
You assigned display: inline-block; to your sections. that cause your sections align on bottom. if you want vertical centering, you can use flex.
Example: https://codepen.io/anon/pen/zQbMzR
Float elements align on top by default.
Inline and Inline-block elements align on Bottom by default.
For vertical align, you can use flex.

While you can use Flex, you don't have to.
div.section {
display: inline-block;
height: 100%;
width: 100%;
vertical-align: top;
}

Preventing content visibility underneath a transparent fixed navigation bar

I have a semi-transparent navigation bar that has a fixed position at the top of the window, and content underneath it.
I'd like to make it so that the #content isn't ever visible underneath the navigation bar. Setting the top margin of the content to the same height as the navigation bar works, when the user is at the top of the page. However when the user scrolls down, the content becomes visible underneath the navigation bar.
Basically I'm trying to push/clip the top of the content div, so none of its content is ever visible underneath the navigation bar.
The navigation bar's transparency is particularly important, so simply having an opaque gray background won't work for what I need.
Any suggestions for accomplishing what I'm trying to do?
Code:
http://jsfiddle.net/NAMka/
HTML:
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="content"></div>
CSS:
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#content {
margin-top: 60px;
}
JS:
// This is a little cleaner than just manually repeating the p tags.
for (var i = 0; i <= 20; i++) {
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}
Some mock-ups of what I'm trying to do
This is what the fiddle will look like if you scroll down a little bit. Notice how the content is visible underneath the navigation bar.
Ideally, I'd like the content to be clipped, so it isn't visible underneath the navigation bar.
Update:
Although not ideal, I figured out a somewhat hackish way to achieve what I want involving some JS and the overflow:hidden CSS setting. It seems to work well enough for my purposes.
http://jsfiddle.net/NAMka/4/
HTML:
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="container">
<div id="veil">
<div id="content"></div>
</div>
</div>
CSS:
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#container {
background: yellow;
margin-top: 60px;
z-index: -1;
position: relative;
}
#veil {
background: red;
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
overflow: hidden;
}
#content {
background: blue;
position: absolute;
left: 0px;
bottom: 0px;
}
JS:
for (var i = 0; i <= 6; i++) {
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}
var height = $('#content').height();
$('#container').height(height);
$('#veil').height(height);
$(window).scroll(function() {
$('#veil').height($('#content').height() - $(window).scrollTop() );
});

You can add a white div that sits beneath the navbar but above the content.
http://jsfiddle.net/naLz7/
HTML
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="bottom"></div>
<div id="content"></div>
CSS
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#bottom {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #fff;
z-index: 0;
}
#content {
margin-top: 60px;
}

How can I put element in the middle of vertical align?

I made DEMO with JSfiddle so please check.
This show a comment that slides from right side to very left.
It's shown just a little bit above than middle of vertical align.
How can I show it right in middle?
Please fix and update my JSfiddle
Javascript
function transition() {
$('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
$('.newsticker').append("<p style='margin-left:400px;opacity:0'>Hello! This is a test</p>");
$('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
}
setInterval(transition, 2000);
CSS
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
}
.newsticker p{
padding-left:10px;
padding-right:10px;
float:left;
position:absolute;
}
HTML
<div class="newsticker">
</div>

First reset browsers default stylesheet like margin or padding by:
* {
padding: 0;
margin: 0;
}
Then add line-height: 100px; CSS declaration to the .newsticker element:
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px; /* -------- */
line-height: 100px; /* | */
/* ^---------- */
}
JSFiddle Demo
Update
By using CSS, it is almost impossible to achieve this goal. I create a jQuery version, It calculates height of the dynamic paragraph and set top property to get it to the middle of its parent. In this case a little change is needed in CSS:
CSS:
div.newsticker {
position: relative; /* Add relative position to the parent */
overflow: hidden; /* Hide the overflow */
}
.newsticker p {
width: 100%; /* Set the width of paragraph to '100%' or 'inherit' */
}
JavaScript/jQuery:
var newsticker = $('.newsticker'),
maxHeight = newsticker.height();
function transition() {
newsticker.find('p').animate({
marginLeft : "400px",
opacity : ".0"
}, 600).fadeOut(100);
newsticker.append(
$('<p>').css({
'margin-left' : '400px',
'opacity' : '0'
// Put your text in .text() method:
}).text('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit nihil voluptatibus maxime sit quam delectus eaque officiis cumque accusamus velit nesciunt deserunt veniam molestias alias? Eaque iste quia non.')
).find('p').each(function() {
if ($(this).css('top') == 'auto')
$(this).css('top',
(maxHeight - $(this).height()) / 2
);
});
newsticker.find('p').animate({"marginLeft":"0px","opacity":"1"}, 600);
}
setInterval(transition, 2000);
Here is the JSFiddle Demo.

UPDATE
new Fiddle: New JsFiddle
HTML:
<div class="newsticker">
<div class="middle"><p><p></div>
</div>
JS:
function transition() {
$('.middle').animate({"right":"-100%","opacity":".0"}, 600, function() {
$('.middle').first().remove();
});
var width = $('.newsticker').width();
$('.newsticker').append("<div class='middle'><p style='width: " + width + "px;'>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p></div>");
var height = $('.middle p').last().height() / 2;
$('.middle p').css('top','-' + height + 'px');
$('.middle').animate({"right":"0px","opacity":"1"}, 600);
}
setInterval(transition, 2000);
CSS:
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
padding: 0px;
margin: 0px;
overflow: hidden;
position: relative;
}
.newsticker p{
padding-left:10px;
padding-right:10px;
line-height: 1em;
padding: 0px;
margin: 0px;
position: relative;
display: block;
}
.middle {position: absolute; top: 50%; padding:0; margin:0; right: -100%; opacity: 0;}
ORIGINAL ANSWER
here is the working fiddle
JsFiddle
you needed 100px line-height on your p tag and you needed to reset padding and margin on your div and p
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
padding: 0px;
margin: 0px;
}
.newsticker p{
padding-left:10px;
padding-right:10px;
float:left;
position:absolute;
line-height: 100px;
padding: 0px;
margin: 0px;
}
also made some improvements to your animation:
function transition() {
$('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600, function() {
$('.newsticker p').remove();
$('.newsticker').append("<p style='margin-left:400px;opacity:0'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p>");
$('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
});
}
setInterval(transition, 2000);
you have to start with this:
<div class="newsticker">
<p><p>
</div>

I have updated the fiddle, you can see the result here
This is the css applied on parent and child respectively
//parent
position:relative;
//child
position:absolute/relative;
top:50%;
height:x;
margin-top:-x/2; // half the height
There are two ways to vertically center align a block.
Take top position to 50%, and negative margin to half the height of block. This will force it to align vertically center. This is useful only when you know the size of the block.
Use the display technique. Apply 'display:table-cell' to the parent container and for the child container use 'vertical-align:middle' property. This will align your block vertically whatever the size may change to.