Cannon Safe® Branding Guidelines

In this example below you will see how to do a Cannon Safe® Branding Guidelines with some HTML / CSS and Javascript

This is a book I made some time ago, but the pen is a quick exploration of page turning using transitions and transforms.

Thumbnail
This awesome code was written by Ángel Valdez, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ángel Valdez ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Cannon Safe® Branding Guidelines</title>
  <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="book bound">
  <div class="pages">
    <div class="page">
      <h1>Cannon Safe®</h1>
      <h2>by Ángel Valdez</h2>
    </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/aveart/cannon-safeandxae-branding-guidelines-QgRKrN */
.book {
  transition: opacity 0.4s 0.2s;
}
.page {
  width: 516px;
  height: 311px;
  background-colour: #fff;
  float: left;
  margin-bottom: 0.5em;
}
.page:first-child {
  float: right;
}
.page:nth-child(even) {
  clear: both;
}
.bound {
  -webkit-perspective: 250vw;
          perspective: 250vw;
}
.bound .pages {
  width: 1032px;
  height: 311px;
  position: relative;
  -webkit-transform: rotateX(12deg);
          transform: rotateX(12deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 1px transparent;
}
.bound .page {
  float: none;
  clear: none;
  margin: 0;
  position: absolute;
  top: 0;
  width: 516px;
  height: 311px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: -webkit-transform 1.4s;
  transition: transform 1.4s;
  transition: transform 1.4s, -webkit-transform 1.4s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.bound .page:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.7s;
  z-index: 2;
}
.bound .page:nth-child(odd) {
  pointer-events: all;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  right: 0;
  border-radius: 0 4px 4px 0;
}
.bound .page:nth-child(odd):hover {
  -webkit-transform: rotateY(-10deg);
          transform: rotateY(-10deg);
}
.bound .page:nth-child(odd):hover:before {
  background: rgba(0, 0, 0, 0.03);
}
.bound .page:nth-child(odd):before {
  background: rgba(0, 0, 0, 0);
}
.bound .page:nth-child(even) {
  pointer-events: none;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  left: 0;
  border-radius: 4px 0 0 4px;
}
.bound .page:nth-child(even):before {
  background: rgba(0, 0, 0, 0.2);
}
.bound .page.grabbing {
  transition: none;
}
.bound .page.flipped:nth-child(odd) {
  pointer-events: none;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.bound .page.flipped:nth-child(odd):before {
  background: rgba(0, 0, 0, 0.2);
}
.bound .page.flipped:nth-child(even) {
  pointer-events: all;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.bound .page.flipped:nth-child(even):hover {
  -webkit-transform: rotateY(10deg);
          transform: rotateY(10deg);
}
.bound .page.flipped:nth-child(even):hover:before {
  background: rgba(0, 0, 0, 0.03);
}
.bound .page.flipped:nth-child(even):before {
  background: rgba(0, 0, 0, 0);
}
*,
* :before,
*:after {
  box-sizing: border-box;
}
html,
body {
  background: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 0;
  line-height: 1.5em;
}
.page {
  color: transparent;
  background: left top no-repeat;
  background-size: cover;
}
.page:nth-child(1),
.page:nth-child(2),
.page:nth-child(3),
.page:nth-child(4),
.page:nth-child(5),
.page:nth-child(6),
.page:nth-child(7),
.page:nth-child(8) {
  background-position: right top;
}
.page:nth-child(1) {
  background-image: url('https://i.imgur.com/bNiuO5v.jpg');
}
.page:nth-child(2) {
  background-image: url('https://imgur.com/1aweCsv.jpg');
}
.page:nth-child(3) {
  background-image: url('https://imgur.com/qRgGK1U.jpg');
}
.page:nth-child(4) {
  background-image: url('https://imgur.com/MELoWlF.jpg');
}
.page:nth-child(5) {
  background-image: url('https://imgur.com/oNagEBG.jpg');
}
.page:nth-child(6) {
  background-image: url('https://imgur.com/HA50yDZ.jpg');
}
.page:nth-child(7) {
  background-image: url('https://imgur.com/OfD9FLk.jpg');
}
.page:nth-child(8) {
  background-image: url('https://imgur.com/SlICa0U.jpg');
}



/*Downloaded from https://www.codeseek.co/aveart/cannon-safeandxae-branding-guidelines-QgRKrN */
var pages = $('.pages').children();
var grabs = false; 

pages.each(function(i) {
  var page = $(this);
  if (i % 2 === 0) {
    page.css('z-index', (pages.length - i)); 
  }
});

$(window).load(function() {
  
  $('.page').click(function() {
    var page = $(this);
    var page_num = pages.index(page) + 1;
    if (page_num % 2 === 0) {
      page.removeClass('flipped');
      page.prev().removeClass('flipped');
    } else {
      page.addClass('flipped');
      page.next().addClass('flipped');
    }
  });

  if (grabs) {
    $('.page').on('mousedown', function(e) {
      var page = $(this);
      var page_num = pages.index(page) + 1;
      var page_w = page.outerWidth();
      var page_l = page.offset().left;
      var grabbed = '';
      var mouseX = e.pageX;
      if (page_num % 2 === 0) {
        grabbed = 'verso';
        var other_page = page.prev();
        var centerX = (page_l + page_w);
      } else {
        grabbed = 'recto';
        var other_page = page.next();
        var centerX = page_l;
      }

      var leaf = page.add(other_page);

      var from_spine = mouseX - centerX;

      if (grabbed === 'recto') {
        var deg = (90 * -(1 - (from_spine/page_w)));
        page.css('transform', 'rotateY(' + deg + 'deg)');

      } else {
        var deg = (90 * (1 + (from_spine/page_w)));
        page.css('transform', 'rotateY(' + deg + 'deg)');
      }

      leaf.addClass('grabbing');

      $(window).on('mousemove', function(e) {
        mouseX = e.pageX;
        if (grabbed === 'recto') {
          centerX = page_l;
          from_spine = mouseX - centerX;
          var deg = (90 * -(1 - (from_spine/page_w)));
          page.css('transform', 'rotateY(' + deg + 'deg)');
          other_page.css('transform', 'rotateY(' + (180 + deg) + 'deg)');
        } else {
          centerX = (page_l + page_w);
          from_spine = mouseX - centerX;
          var deg = (90 * (1 + (from_spine/page_w)));
          page.css('transform', 'rotateY(' + deg + 'deg)');
          other_page.css('transform', 'rotateY(' + (deg - 180) + 'deg)');
        }

        console.log(deg, (180 + deg) );
      });


      $(window).on('mouseup', function(e) {
        leaf
          .removeClass('grabbing')
          .css('transform', '');

        $(window).off('mousemove');
      });
    });
  }
  
  $('.book').addClass('bound');
});

Comments

More from Ángel Valdez

A Pen by &#xC1;ngel Valdez

A Pen by Ángel Valdez

By aveart
A Pen by &#xC1;ngel Valdez

A Pen by Ángel Valdez

By aveart
A Pen by &#xC1;ngel Valdez

A Pen by Ángel Valdez

By aveart
A Pen by &#xC1;ngel Valdez

A Pen by Ángel Valdez

By aveart

You Might Also Like

karaokend

karaokend

By anareyna
Portfolio - FreeCodeCamp

Portfolio - FreeCodeCamp

By katarzynaadr
Automatic helper classes with SASS maps

Automatic helper classes with SASS maps

By fxm90
A Pen by Zachary Woodley

A Pen by Zachary Woodley

By zwoodley128
Replace every &quot;o&quot; with an &quot;a&quot;

Replace every "o" with an "a"

By Felix De Montis
GSAP Pixi Plugin

GSAP Pixi Plugin

By osublake
codepen&#x7B2C;&#x4E00;&#x7DB2;&#x9801;

codepen第一網頁

By a40311019
feelin&apos;-griddy2

feelin'-griddy2

By gingeryale
© 2018 - Copyright CodeSeek.co
contact email