CodePen Embed - jQuery stuff

<div class="wrap">
  <div class="scrollBox">
    <p>&nbsp;</p>
    <div class="scrollText">
      <p>Vestibulum euismod iaculis varius. Suspendisse auctor nulla eget metus congue lobortis. Maecenas sodales eros quis nibh tincidunt, non dictum quam gravida. Aenean a neque vitae sapien ultrices varius eu ac turpis. Maecenas quis elementum purus.
        Aliquam sodales ut lectus quis porta. Fusce ultrices quis arcu fringilla vulputate. Proin vulputate sapien ut tortor iaculis scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit quam ac velit vestibulum bibendum.
        Maecenas vitae laoreet sapien, eget mattis enim. Praesent sit amet erat blandit, viverra tortor ac, pulvinar ipsum.</p>

      <p>Praesent et diam augue. Pellentesque nec nisl et orci gravida interdum et sed sapien. Nam ornare commodo augue, ac porta est faucibus id. Nullam mollis turpis a augue consectetur aliquet. Aliquam nec elit malesuada, vestibulum massa ut, luctus lorem.
        Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ipsum velit, ultrices sed quam vitae, gravida aliquet nulla. Cras scelerisque orci semper lorem pretium, sed rutrum mi molestie. In hac habitasse platea dictumst. Quisque in est
        turpis. Suspendisse vehicula justo vel tellus posuere dictum eu et eros. Aliquam vulputate ex vel sapien placerat, efficitur ornare risus faucibus. Nam quis scelerisque felis. Aliquam tortor neque, molestie vel vehicula eu, rhoncus eleifend tellus.
        Suspendisse imperdiet eget lorem in porta.</p>

      <p>Cras pulvinar rhoncus posuere. Vestibulum tortor elit, rhoncus eget dolor quis, ornare iaculis nibh. Nam enim nibh, fermentum quis tortor id, accumsan semper justo. Maecenas accumsan efficitur erat, vitae hendrerit massa elementum a. Etiam condimentum
        bibendum ligula sed pulvinar. Ut interdum tincidunt nisi, vitae tristique erat sodales eu. Cras congue neque eu ipsum cursus, et placerat augue commodo. Fusce vitae ex tortor. Ut aliquet sagittis erat, sed sagittis ante varius non. Donec maximus
        mi vel neque volutpat, vel pellentesque risus vulputate. Mauris erat eros, lobortis a sem in, rhoncus vestibulum ligula. Vivamus facilisis id felis non sollicitudin. Donec sed semper enim. Sed volutpat sodales ornare. Aenean rutrum placerat volutpat.</p>

      <p>Nam a libero eget orci eleifend hendrerit sed quis dolor. Vivamus aliquet sit amet diam eget mollis. Etiam nec diam consectetur enim sodales mattis. In at mattis sem. Maecenas in ex tincidunt, rhoncus turpis ac, vehicula erat. Duis convallis pretium
        massa, sed sodales nunc ultrices sit amet. Fusce semper nisl urna, vel vestibulum massa dictum sed. Curabitur fermentum, elit at dignissim tempus, arcu mauris eleifend tellus, quis accumsan justo risus vel ligula. Vestibulum rutrum mi orci, sit
        amet condimentum erat venenatis fermentum. Nam lacinia, sem vel eleifend iaculis, magna massa euismod augue, id aliquam lectus ligula in arcu.</p>
    </div>
  </div>


  <div class="appender">
  </div>

  <div class="imgBox">
    <div class="photos">
      <img src="http://php.shanezentz.com/images/lightbox/lightbox1.JPG">
      <img src="http://php.shanezentz.com/images/lightbox/lightbox2.JPG">
      <img src="http://php.shanezentz.com/images/lightbox/lightbox3.JPG">
      <img src="http://php.shanezentz.com/images/lightbox/lightbox4.JPG">
    </div>
  </div>
  <br clear="all">
  <div class="imgBox2">
    <div class="photos2">
      <img src="http://php.shanezentz.com/images/lightbox/lightbox1.JPG">
      <img src="http://php.shanezentz.com/images/lightbox/lightbox2.JPG">
      <img src="http://php.shanezentz.com/images/lightbox/lightbox3.JPG">
      <img src="http://php.shanezentz.com/images/lightbox/lightbox4.JPG">
    </div>
  </div>

  <br clear="all">
  <div class="headlineContainer">
    <div class="headline">
      <h3>First Headline Moving Here</h3>
      <h3>Second Headline Moving Here</h3>
      <h3>Third Headline Moving Here</h3>
      <h3>Fourth Headline Moving Here</h3>
    </div>
  </div>

<div class="appender2">
  </div>
</div>

.wrap {
  width: 100%;
}

.scrollBox {
  float: left;
  width: 380px;
  height: 300px;
  margin: 0 auto;
  background-color: #9C3;
  overflow: hidden;
}

.scrollText {
  position: relative;
  overflow: hidden;
  width: 320px;
  height: 500px;
  z-index: 101;
  line-height: 0px;
}

.scrollText p {
  line-height: 1.5em;
  margin: 0;
  padding: 5px;
  display: block;
  height: 250px;
  width: 300px;
  overflow: hidden;
  position: absolute;
}

.appender {
  float: left;
  width: 200px;
  height: 250px;
  position: relative;
  background-color: #069;
}

.appender2 {
  float: right;
  width: 200px;
  height: 130px;
  position: relative;
  background-color: #574;
}

.imgBox {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: white;
  overflow: hidden;
}

.photos {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.photos img {
  display: block;
  overflow: hidden;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 200px;
}

.headlineContainer {
  float: left;
  width: 250px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  background-color: #FC3;
}

.headline {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  /*overflow: hidden;*/
  
  line-height: 0;
}

.headline h3 {
  display: block;
  line-height: 1.5em;
  position: absolute;
  height: 100px;
  width: 300px;
  margin: 0 auto;
  /*overflow: hidden;*/
}

.imgBox2 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: white;
  margin: 0 auto;
  /*overflow: hidden;*/
}

.photos2 {
  position: relative;
  /*overflow: hidden;*/
  
  width: 200px;
  height: 200px;
}

.photos2 img {
  display: block;
  /*overflow: hidden;*/
  
  position: absolute;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 200px;
}

// JavaScript Document

	console.log('enter:');
	$('.appender').prepend('<h3>prepending text here....</h3>');
	$('.appender').append('<p>Appending this here text....</p>');
$('.appender2').append(' <img src="http://php.shanezentz.com/images/lightbox/lightbox4.JPG" width="200px">');
var scrollText_count; 
  var scrollText_interval; 
  var old_scrollText = 0;
 var current_scrollText = 0; var container_Height = 300;
 $('.scrollText p').css('top',container_Height);
 $('.scrollText p').first().css('top',0); 
 scrollText_count = $(".scrollText p").size(); 
 $(".scrollText p:eq("+current_scrollText+")").css('top','0px'); 
 scrollText_interval = setInterval(scrollText_rotate,1000); 
 function scrollText_rotate() { //console.log('enter function....');
 current_scrollText = (old_scrollText + 1) % scrollText_count;
 $(".scrollText p:eq(" + old_scrollText + ")").animate({top: -container_Height},"slow", function() { $(this).css('top',container_Height + 'px'); });
 $(".scrollText p:eq(" + current_scrollText + ")").show().animate({top: 0},"slow");
  $(".scrollText p:eq(" + current_scrollText + ")").show().animate({top: 0},300);
 //console.log('count: ' + scrollText_count);
 console.log('p: ' + current_scrollText);
 old_scrollText = current_scrollText; }
 
 
 
var photo_count = $(".photos img").size();
var currentPhoto = 0;
var oldPhoto = 0;
var containerWidth = 200;
var timing;
 $('.photos img').css('left',containerWidth);
// $('.photos img').css('z-index',0);
$('.photos img').first().css('left',0);
//$('.photos img').first().css('z-index',1);
$(".photos img:eq("+currentPhoto+")").css('left','0px'); 
//$(".photos img:eq("+currentPhoto+")").css('z-index','1');
 timing = setInterval(moveIt,1000);
 function moveIt() {
	currentPhoto = (oldPhoto +1) % photo_count;
	$(".photos img:eq("+ oldPhoto + ")").animate({left: -containerWidth},"slow", function() {$(this).css('left', containerWidth + 'px'); });
	//$(".photos img:eq("+ oldPhoto + ")").show().animate({left:0},"slow");
	$(".photos img:eq("+ currentPhoto + ")").show().animate({left:0},200);
	oldPhoto = currentPhoto;
	console.log('Photo: ' + currentPhoto); 
 }
 
 
 // headline scroller left to right;
 var headline_count = $(".headline h3").size();
 var current_headline = 0;
 var old_headline = 0;
 var box_width = 300;
 var move;
 $('.headline h3').css('left', box_width);
 $('.headline h3').first().css('left', 0);
 $('.headline h3:eq("current_headline+")').css('left', '0px');
 move = setInterval(scroller, 1000);
 function scroller(){
	 current_headline = (old_headline + 1) % headline_count;
	 $(".headline h3:eq("+ old_headline +")").animate({left: - box_width}, "fast", function() {$(this).css('left', box_width + 'px');});
	 $(".headline h3:eq("+ current_headline +")").show().animate({left:0}, 300);
	 old_headline = current_headline;
	 console.log('headline: ' + current_headline);
 }
 
 
 
 var photo_count2 = $(".photos img").size();
var currentPhoto2 = 0;
var oldPhoto2 = 0;
var containerWidth2 = 200;
var timing2;
 $('.photos2 img').css('right',containerWidth2);
// $('.photos img').css('z-index',0);
$('.photos2 img').first().css('right',0);
//$('.photos img').first().css('z-index',1);
$(".photos2 img:eq("+currentPhoto2+")").css('right','0px'); 
//$(".photos img:eq("+currentPhoto+")").css('z-index','1');
 timing2 = setInterval(moveIt2,1000);
 function moveIt2() {
	currentPhoto2 = (oldPhoto2 +1) % photo_count2;
	$(".photos2 img:eq("+ oldPhoto2 + ")").animate({right: -containerWidth2},"slow", function() {$(this).css('right', containerWidth2 + 'px'); });
	//$(".photos img:eq("+ oldPhoto + ")").show().animate({left:0},"slow");
	$(".photos2 img:eq("+ currentPhoto2 + ")").show().animate({right:0},200);
	oldPhoto2 = currentPhoto2;
	console.log('Photo2: ' + currentPhoto2); 
 }

This Pen is owned by Shane Zentz on CodePen.

See more by @szentz on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js