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

attr

attr

By Jop
CSS Select: Country Rest API

CSS Select: Country Rest API

By ftabor
Simple menu with submenu - CSS Only

Simple menu with submenu - CSS Only

By luizomf
Weather Forecast App

Weather Forecast App

By rxrossi
Zoop!

Zoop!

By jasesmith
A Pen by sevdeawesome

A Pen by sevdeawesome

By sevdeawesome
CSS-only balls

CSS-only balls

By deineko
CodeCampTributtePage

CodeCampTributtePage

By fabiusks
© 2018 - Copyright CodeSeek.co
contact email