<div class="ratio_image ratio_image_1x1">
<img src="http://lorempixel.com/500/500/" alt="">
</div>
<div class="ratio_image ratio_image_1x2">
<img src="http://lorempixel.com/500/500/" alt="">
</div>
<div class="ratio_image ratio_image_2x1">
<img src="http://lorempixel.com/500/500/" alt="">
</div>
<div class="ratio_image ratio_image_2x2">
<img src="http://lorempixel.com/500/500/" alt="">
</div>.ratio_image {
width: 300px;
height: 300px;
float: left;
margin: 20px;
position: relative;
overflow: hidden;
}
.ratio_image:before {
width: 100%;
display: block;
content: "";
}
.ratio_image img {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
}
.ratio_image_2x1 {
width: 600px;
}
.ratio_image_1x2,
.ratio_image_2x2 {
height: 600px;
}
.ratio_image img {
width: 100%;
}
.ratio_image_1x1:before {
padding-top: 100%; /* (300 / 300) * 100%; */
}
.ratio_image_2x1:before {
padding-top: 200%; /* (600 / 300) * 100%; */
}
.ratio_image_1x2:before {
padding-top: 50%; /* (300 / 600) * 100%; */
}
.ratio_image_2x2:before {
padding-top: 100%; /* (600 / 600) * 100%; */
}$(window).scroll(function() {
if ($(window).scrollTop() > 1 && $(window).scrollTop() < 815){
$('html,body').stop().animate({ 'scrollTop': 815 }, 'fast');
});
});;(function ( $, window, document ) {
"use strict";
var viewport = 0,
wheight = $(window).height(),
scrollTop;
$.fn.viewport = function ( options ) {
options = $.extend( {}, $.fn.viewport.options, options );
$.fn.viewport.options.items = this;
if (!$.fn.viewport.options.elements.length)
{
$.fn.viewport.calculate();
}
if ($.fn.viewport.options.elements.length)
{
$.fn.viewport.animate();
}
$(window).scroll(function(){
$.fn.viewport.animate();
});
$(window).resize(function(){
$.fn.viewport.calculate();
});
};
$.fn.viewport.options = {
items: {},
elements: {}
};
$.fn.viewport.calculate = function() {
$.fn.viewport.options.elements = $.fn.viewport.options.items.map(function(){
if ($(this).length) {
return $(this);
}
});
}
$.fn.viewport.animate = function() {
scrollTop = $(window).scrollTop();
$.fn.viewport.options.elements.map(function(){
viewport = scrollTop + wheight;
if ($(this).offset().top <= viewport && !$(this).hasClass('active'))
{
$(this).addClass('active');
}
});
}
})( jQuery, window, document );$('.fade-in').viewport();<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>
<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>
<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>
<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>.fade-in {
opacity: 0;
transform: scale(0) rotate(-40deg);
transition: opacity 0.7s, transform 0.5s;
}
.fade-in.active {
opacity: 1;
transform: scale(1) rotate(0deg);
}var paths = {
"js": {
"ajax": {
"src": "./static/ajax/*.js",
"build": "build.js",
"dist": "./static/build"
},
"created": {
"src": "./static/created/*.js",
"build": "created.js",
"dist": "./static/build/created"
}
}
}
function doit(dir)
{
var item = paths.js[dir];
/* Листинг файлов
------------------------------------------------------------------------------------------------------------------------*/
gulp.task('lint', function() {
gulp.src(item.src)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
/* Конкатенация и минификация файлов
------------------------------------------------------------------------------------------------------------------------*/
gulp.task('minify', function(){
gulp.src(item.src)
.pipe(concat(item.build))
.pipe(gulp.dest(item.dist))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(item.dist))
});
gulp.run('lint', 'minify');
}
gulp.task('make', function(){
for (var dir in paths.js)
{
doit( dir );
}
});var fileinclude = require('gulp-file-include');
gulp.task('html', function() {
gulp.src(path.assets.html)
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest(path.build.html))
});@@include('./components/meta.html', {
"title": "Main",
"viewport": "width=device-width, initial-scale=1"
})