Transitioning application screens with semantically named classes

Developer
Daniel Grant
Size
3,697 Kb
Views
6,072
  1. Transitioning application screens with semantically named classes Previews
  2. Transitioning application screens with semantically named classes HTML Codes
  3. Transitioning application screens with semantically named classes CSS Codes
  4. Transitioning application screens with semantically named classes JS Codes

How do I make an transitioning application screens with semantically named classes?

What is a transitioning application screens with semantically named classes? How do you make a transitioning application screens with semantically named classes? This script and codes were developed by Daniel Grant on 28 December 2022, Wednesday.

Transitioning application screens with semantically named classes Previews
IQ Test

Transitioning application screens with semantically named classes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Transitioning application screens with semantically named classes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { position: relative; box-sizing: border-box;
}
html,
body { height: 100%;
}
h1 { font-size: 50px;
}
p { font-size: 16px;
}
.header { position: absolute; top: 0; z-index: 1; width: 100%; height: 70px; line-height: 70px; text-align: center; background: #ddd;
}
.screens-wrapper { position: absolute; width: 100%; height: 100%; padding-top: 70px;
}
.screens { height: 100%;
}
.screen { position: absolute; width: 100%; height: 100%; padding: 10px 30px; background: #fff; border: 10px solid #bbb; backface-visibility: hidden;
}
.screen.is-active { z-index: 2; animation: page-entrance-right 0.5s;
}
.screen.is-previous { z-index: 1; animation: page-exit-left 0.5s;
}
.screen.is-active ~ .screen.is-previous { animation: page-exit-right 0.5s;
}
.screen.is-previous ~ .screen.is-active { animation: page-entrance-left 0.5s;
}
@keyframes page-entrance-left { from { transform: translateX(100%); } to { transform: translateX(0); }
}
@keyframes page-exit-left { from { transform: translateX(0); } to { transform: translateX(-100%); }
}
@keyframes page-entrance-right { from { transform: translateX(-100%); } to { transform: translateX(0); }
}
@keyframes page-exit-right { from { transform: translateX(0); } to { transform: translateX(100%); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="header"> <button id="generate">Generate Page</button> <button id="back">Go back</button> <button id="forwards">Go forwards</button> <button id="reset">Reset</button>
</div>
<div class="screens-wrapper"> <div class="screens" id="screens"> <div class="screen is-active" data-pageNum="1"> <h1>Level 1</h1> <p><code>.is-active</code> class is applied to the incoming screen.<br> <code>.is-previous</code> class is applied to the screen getting transitioned out. </p> <p>And CSS takes care of the rest :)</p> <p>Tested on iOS 5/6 iPhone/iPad, Android 4.2 & Window Phone 7.5 (thanks to Stu Robson's device lab)</p> </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>

Transitioning application screens with semantically named classes - Script Codes CSS Codes

* { position: relative; box-sizing: border-box;
}
html,
body { height: 100%;
}
h1 { font-size: 50px;
}
p { font-size: 16px;
}
.header { position: absolute; top: 0; z-index: 1; width: 100%; height: 70px; line-height: 70px; text-align: center; background: #ddd;
}
.screens-wrapper { position: absolute; width: 100%; height: 100%; padding-top: 70px;
}
.screens { height: 100%;
}
.screen { position: absolute; width: 100%; height: 100%; padding: 10px 30px; background: #fff; border: 10px solid #bbb; backface-visibility: hidden;
}
.screen.is-active { z-index: 2; animation: page-entrance-right 0.5s;
}
.screen.is-previous { z-index: 1; animation: page-exit-left 0.5s;
}
.screen.is-active ~ .screen.is-previous { animation: page-exit-right 0.5s;
}
.screen.is-previous ~ .screen.is-active { animation: page-entrance-left 0.5s;
}
@keyframes page-entrance-left { from { transform: translateX(100%); } to { transform: translateX(0); }
}
@keyframes page-exit-left { from { transform: translateX(0); } to { transform: translateX(-100%); }
}
@keyframes page-entrance-right { from { transform: translateX(-100%); } to { transform: translateX(0); }
}
@keyframes page-exit-right { from { transform: translateX(0); } to { transform: translateX(100%); }
}

Transitioning application screens with semantically named classes - Script Codes JS Codes

var $screens = $('#screens');
function genscreen(level){ level = level || 1; return $('<div class="screen is-active"><h1>Level '+level+'</h1></div>');
}
function checkButtons() { $('button').removeAttr('disabled'); if($('.screen.is-active', $screens).index() < 1) { $('#back').attr('disabled', 'disabled'); } if($('.screen.is-active', $screens).index() == $('.screen', $screens).length -1) { $('#forwards').attr('disabled', 'disabled'); }
}
checkButtons();
$('#generate').on('click', function() { var count = $('.screen', $screens).length; $('.screen', $screens).removeClass('is-active is-previous'); $screens.append(genscreen(count+1)); $('.screen').eq($('.screen', $screens).length - 2).addClass('is-previous'); checkButtons();
});
$('#back').on('click', function(){ var oldActive = $('.screen.is-active', $screens); $('.screen', $screens).removeClass('is-previous'); oldActive.prev().addClass('is-active').end().addClass('is-previous').removeClass('is-active'); checkButtons();
});
$('#forwards').on('click', function(){ var oldActive = $('.screen.is-active', $screens); $('.screen', $screens).removeClass('is-previous'); oldActive.next().addClass('is-active').end().addClass('is-previous').removeClass('is-active'); checkButtons();
});
$('#reset').on('click', function(){ $('.screen', $screens).remove(); $screens.append(genscreen()); checkButtons();
});
Transitioning application screens with semantically named classes - Script Codes
Transitioning application screens with semantically named classes - Script Codes
Home Page Home
Developer Daniel Grant
Username djgrant
Uploaded December 28, 2022
Rating 3
Size 3,697 Kb
Views 6,072
Do you need developer help for Transitioning application screens with semantically named classes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Grant (djgrant) Script Codes
Name
Touch rem
Grid crosshairs
Zero element inline validation bubble
Wireframe solar system
Wireframe Planet
Responsive Tabs
Gradient Border
Loading bar for ajax pages
CSS triangles with border
Number input with controls
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!