ArtFilm Studio - Photo & Video Services

Description

ArtFilm Studio, situated in Sochaczew/Warsaw, Poland, specializes in a diverse range of photo and video services, including wedding reportages, landscapes, music videos, drone films, promotional content, educational films, instructional videos, and more.

I was tasked with creating the design and developing the website from scratch, as well as populating and optimizing its content. Given the client's preference for a one-time content update, we mutually decided to opt for a static website without any Content Management System (CMS).

The final product is a visually appealing, user-friendly website that effectively communicates the diverse services offered by ArtFilm Studio.

Details

Technologies	NodeJS, Gulp, jQuery, Ajax, Lazysizes, Magnific popup, SASS, PostCSS, SVG, PHP, SEO
Features	Responsive, Full-page slider, Grid & popup gallery, Animations, Lazy loading resources, Dynamically load pages, Smooth scroll, Tabs, Feedback form, Social icons, Fixed header, Google maps, SEO optimizations, Animated page loader
Date	July 2020
Link	https://artfilmstudio.pl

Code snippets

js Function for optimized placement of YouTube videos on the site

(function() {
	var youtube = document.querySelectorAll( ".youtube-lazy-video" );
	for (let i = 0; i < youtube.length; i++) {
		var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/hq720.jpg";
		var image = '<img class="lazyload" data-src="'+source+'">';
		youtube[i].insertAdjacentHTML('beforeend', image);
			youtube[i].addEventListener( "click", function() {
				var iframe = document.createElement( "iframe" );
					iframe.setAttribute( "frameborder", "0" );
					iframe.setAttribute( "allowfullscreen", "" );
					iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
					this.innerHTML = "";
					this.appendChild( iframe );
				} );
			youtube[i].insertAdjacentHTML('beforeend', '<svg class="yt-playbtn" viewBox="0 0 158 110"> <path class="yt-playbtn-shape" fill="#f00" d="M154.4,17.5c-1.8-6.7-7.1-12-13.9-13.8C128.2,0.5,79,0.5,79,0.5s-48.3-0.2-60.6,3 c-6.8,1.8-13.3,7.3-15.1,14C0,29.7,0.3,55,0.3,55S0,80.3,3.3,92.5c1.8,6.7,8.4,12.2,15.1,14c12.3,3.3,60.6,3,60.6,3s48.3,0.2,60.6-3 c6.8-1.8,13.1-7.3,14.9-14c3.3-12.1,3.3-37.5,3.3-37.5S157.7,29.7,154.4,17.5z"/> <polygon fill="#fff" points="63.9,79.2 103.2,55 63.9,30.8 "/> </svg>');
	};
})();

js Slider handler

$(document).ready(function() {
	// SLIDER
	let slideIndex = 0;
	setTimeout(showSlides, 5000);
	function showSlides() {
		$(".slider img").eq(slideIndex).removeClass("active");
		slideIndex++;
		if (slideIndex >= $(".slider img").length) {slideIndex = 0}
		$(".slider img").eq(slideIndex).addClass("active");
		setTimeout(showSlides, 5000);
	}
});

js Tabs handler

$(document).ready(function() {
	// TABS
	$(".tabs__item").not(":first").hide();
	$(".tabs .tabs__nav-item").click(function() {
		$(".tabs .tabs__nav-item").removeClass("active").eq($(this).index()).addClass("active");
		$(".tabs__item").hide().eq($(this).index()).fadeIn();
	}).eq(0).addClass("active");
});

js Gallery handler

$(document).ready(function() {
	// GALLERY
	let selectedClass = "plener";
	checkSelectedClass();
	function checkSelectedClass(){
		$("#masonry div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
	}
	$(".gallery__toolbar span").on("click", function(event) {
		event.preventDefault();

		$(".gallery__toolbar *").removeClass('active').eq($(this).index()).addClass("active");

		selectedClass = $(this).data("rel");
		$("#masonry").fadeTo(100, 0.1);
		$("#masonry div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
		setTimeout(function() {
			$("."+selectedClass).fadeIn().addClass('scale-anm');
			$("#masonry").fadeTo(300, 1);
		}, 300);
	});
});