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

A Pen by elyse holladay

A Pen by elyse holladay

By elyseholladay
Drawers JS Testing

Drawers JS Testing

By hanihsdd
This stabilo&#xAE; makes my text leak

This stabilo® makes my text leak

By redpik
Simon_Diaz_Tribute_Page_

Simon_Diaz_Tribute_Page_

By novoabla
CSS3 Motion Preloader

CSS3 Motion Preloader

By azlan
CodeHive&apos;s simple markdown WYSIWYG toolbar

CodeHive's simple markdown WYSIWYG toolbar

By Michael Lee 🍕
GSAP Section transitions

GSAP Section transitions

By SENSENEL
Overlapping boxes

Overlapping boxes

By paweldecowski
© 2018 - Copyright CodeSeek.co
contact email