Newsletter Script

index.html

  <div id="newsletter">
  <div class="newsletterWrap">
    <ul>
      <li>Lmy  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passagestext of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,, anorem Ipsum is simply dumd more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
      <li> leap into electronic typesetting, remaining essentially unchanged. It was populaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also therised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
      <li>Lorem Ipsum is simply dummn aner took a galley of type ally unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with y text of the prinnd scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap int unknown printo electronic typesetting, remaining essentiating and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, whedesktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
      <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
      <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap innown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum pasto electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
      <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unksages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
    </ul>
</div>
    <div class="controls">
      <a href="#" class="prev">Prev</a>
      <a href="#" class="next">Next</a>
    </div>
</div>

newsletter-script.markdown

Newsletter Script

A Pen by Chase Harrison on CodePen.

License.

script.js

$(document).ready(function(){
  
  // Construct the newsletter
  function createPages(){
    var pageList = $("#newsletter div.newsletterWrap > ul > li");
    $.pages = 2;
    for(var i = 0; i < pageList.length; i+=$.pages) {
        pageList.slice(i, i+$.pages).wrapAll("<div class='page'></div>");
    }
  }
  createPages();
  var count = 1;
		var pageCount = 0;
  // Assign classes to pages
  $("#newsletter div.page").each(function(){
    if(count === 1){
      $(this).addClass("active")
    }
    $(this).children().eq(0).addClass("front");
    $(this).children().eq(1).addClass("back");
    count++;
			$(this).children().each(function(){
				pageCount++
				$("<div class='pageNum'><span>"+pageCount+"</span> <span>of</span> <span class='total'>"+$("div.page").children().length+"</span></div>")
					.appendTo($(this).children());
			});
  });
	
	
		$("#newsletter li.back #nextBtn a").each(function(){
			$(this).text("« prev");
			$(this).parent().parent().addClass("prev");
		});
// ---Events---
 $("#newsletter a.prev, #nextBtn.prev").on("click", function(){
   prevPage();
 });
  $("#newsletter a.next, #nextBtn:not(.prev)").on("click", function(){
   nextPage();
 });
	
	$("#endBtn").on("click", function(){
		$("div.page").each(function(){
			$(this).removeClass("flipped hidden remove active");
		});
		$("div.page:first-child").addClass("active");
	});
	
//$('.newsletterWrap').on('click', '.active', function(){
//  if(!$("#newsletter div.page:last-of-type").hasClass("flipped")){
//    nextPage();
//  }
//});
//$('.newsletterWrap').on('click', '.flipped', function(){
//    prevPage();
//});
// For Mobile
$('.newsletterWrap').on("swipeleft", nextPage);
$('.newsletterWrap').on("swiperight", prevPage);
	
	
	// Newsletter navigation
		$(".topNav").each(function(){
			$(this).hide();
		});
//			$("a.nav").click(function() {
//				$(this).siblings().last().slideToggle();
//			});
	
	// Moves the form at the bottom of the page
	// to the last page of the newsletter
	$(".secureform").appendTo("#newsletterFeedback");
	
	// Moves the banner on the page to the newsletter
	$("div.slider").appendTo("#newsletterBanner");
	
	// Adds the visible class last to delay
	setTimeout(function() {
		$("#newsletter").addClass("visible");
	}, 2500);
});//doc ready

// Keyboard Accessibility
$(window).keydown(function(e){
   if (e.keyCode == 37) {
      prevPage();
   }
  if (e.keyCode == 39) {
      nextPage();
   }
});

// Prev and Next Functions
function prevPage() {
	$("#newsletter").removeClass("right").addClass("left");
	var length = parseInt($(".flipped").length);
	if (length === 1){
		$("div.page").removeClass("hidden");
	} else {
		$("div.page").eq(length-1).removeClass("hidden");
	}
  $('.flipped').last().removeClass('flipped').addClass('active')
    .siblings('.page').removeClass('active');
	var active = parseInt($(".active").index()+1);
	if($("div.remove").length === 1){
		$("div.page").eq(0).removeClass("remove");
	}
	if($("div.remove").length === 2){
		$("div.page").eq(1).removeClass("remove");
	}
	if($("#newsletter div.page:last-child").hasClass("active")){
				$("#newsletter div.page").eq(parseInt($(".page").length-2)).removeClass("remove");
		}
	$("div.page").eq($(".page.active").index()-1).removeClass("remove");
}
function nextPage() {
		$("#newsletter").removeClass("left").addClass("right");
  $('.active').removeClass('active').addClass('flipped')
    .next('.page').addClass('active').siblings();
	setTimeout(function() {
		$(".flipped").addClass("hidden");
		var pageIndex = parseInt($("div.page.active").index()+1);
	if(pageIndex > 2){
		$("div.page").slice(0,pageIndex-2).addClass("remove");
	}
		var length = $("div.page").length;
	if($("div.page.active").index() === -1){
				$("div.page").slice(0,length-1).addClass("remove");
	}
	}, 750);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

html { height: 100%; overflow: hidden; }
body { background: black; margin: 0; width: 100%; height: 100%; }
.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}



/* STYLING */
#newsletter div.newsletterWrap > ul div.page li {background-color: #eee;}

/* DO NOT DELETE BELOW */
#newsletter {width: 50%; height: 100%; margin: 0 0 0 auto; -webkit-perspective: 2000px; perspective: 2000px;}
#newsletter div.newsletterWrap {position: relative; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
#newsletter div.newsletterWrap > ul {list-style-type: none; margin: 0; padding: 0;}
#newsletter div.newsletterWrap > ul div.page {cursor: pointer; position: absolute; color: black; width: 100%; height: 100%; -webkit-transition: 1.5s -webkit-transform; transition: 1.5s transform; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center;}
#newsletter div.newsletterWrap > ul div.page.flipped {-webkit-transform: rotateY(-180deg); transform: rotateY(-180deg);}
#newsletter div.newsletterWrap > ul div.page.active {z-index: 100}
#newsletter div.newsletterWrap > ul div.page.flipped:last-of-type {z-index: 100;}
#newsletter div.newsletterWrap > ul div.page li {position: absolute; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
#newsletter div.newsletterWrap > ul div.page li.back {-webkit-transform: rotateY(180deg); transform: rotateY(180deg);}