My internship has finished. This blog will not be updated anymore. x

Fifth week at Thinline

I'm already at the end of the fifth week of my internship. Time flies when you're working on some fun projects!

Renewable energy website

After our weekly mondaymeeting, I continued my work on the renewable energy website. Frederik also explained Creem CMS to me. He showed me the process of creating a page inside the cms, and how the templates are made. He also showed me some interesting features of Creem, for example the restrictions you can set to certain blocks. He also gave me some feedback on the front-end work I did, which was good in general!

Animated progress bar

I had quite a lot of fun coding with jQuery and CSS3 on this front-end. On the project pages, there had to be some progress bars. I wrote a jQuery script to animate them smoothly.

Progress bar with jQuery and CSS3

The hardest part was that on most pages, the progress bar is not on the visible section of the page. After a few scrolls, you've reached the section with the progress bar. But the animation runs when the page is loaded, which means the animation is already finished when the user scrolls to the progress bar. This is where the jQuery.appear plugin comes to the rescue! This plugin is a total revamp of the original jQuery appear plugin. This plugin can detect if the element comes into the browser viewport. When the user scrolls and the progress bar appears into the viewport, the animation starts. This is what my final code looks like:

HTML:

<div class="progress-status">
	<div class="progress-amount">
		<span class="progress-percentage">85%</span>completed
	</div>

	<div class="progress-outer">
		<div class="progress-inner"></div>
	</div>
</div>

jQuery:

$('.progress-status').each(function() {

	// variables
	var percentage			= parseInt($(this).find('.progress-percentage').text(), 10),
		percentageField		= $(this).find('.progress-percentage'),
		progressbar			= $(this).find('.progress-inner');

	// Set percentage to zero
	$(percentageField).text('0%');

	// Bind the progress bar to the appear plugin
	$('.progress-percentage').appear();

	// When progress bar appears, execute animation
	$(document.body).one('appear', function(event, $affected) {

		// Animate percentage counter
		$({percentageCounter : 0}).animate({percentageCounter : percentage}, {
			duration: 1500,
			step: function() { // called on every step
				// Update the element's text with value:
				$(percentageField).text(Math.floor(this.percentageCounter + 1) + "%");
			},
			complete : function(){
				$(percentageField).text(percentage + "%");
			}
		});

		// Animate progress bar
		$(progressbar).animate({
			height: percentage + "%"
		}, 1500);
	});
});

// Force check immediately. Otherwise it only starts checking on first scroll...
setTimeout(function(){
	$.force_appear();
}, 100);

Coin animation

The design had a jpg of a coin going inside a piggy bank, to make the statement that you can "save money". I thought it would be appropriate to make an animation of it, so I sliced that image into different parts, experimented with z-index and made the hover animation with jQuery. 

Coin animation with jQuery

jQuery:

if($('.save-with-us').length) {
	// variables
	var coin = $('.save-with-us .euro');

	$('.save-with-us a').mouseenter(function() {
		$(coin).stop().animate({
			backgroundPositionY: '170px'
		}, 500, 'easeInExpo', function() {
			$(coin).css({ opacity: 0 }); // hide it
		});
	}).mouseleave(function(){
		$(coin).css({ backgroundPositionY: '65px' }); // re-position
		$(coin).stop().animate({
			'opacity': 1
		}, 1000, 'easeInExpo');
	});
}

I noticed that Firefox and Opera can't use the background-position-y CSS property. So I had to use a custom CSS hook in jQuery to make it possible. 

Thumbnail direction-aware hover

Jo suggested that I made the thumbnail hover appear onto the thumbnail from the direction in which the mouse entered the thumbnail. I knew that I've seen a plugin to achieve this effect somewhere on the web, and I finally found the jQuery Hoverdir plugin which exactly fitted my needs. In the final result, when you hover over some thumbnails, it looks like the zoom icon is following your mouse. It's just that extra spice that makes your website catch a customer's eye.

Thumbnail direction-aware hover

Future work?

On wednesday, we had our weekly wednesday meeting. I shared my experiences and the progress I made on the front-end I was working on. After the meeting, I had some questions for Jo concerning Creem CMS and the other applications made by Thinline (Motool, ShopInABox, ...). I used the answers to write my first draft of the internship report I was supposed to hand in on friday. 

I would love to share some screenshots of the finished website, but I won't because the clients are confidential . But I can say that it's a beautiful front-end!

Click Here

1 year ago

Sweet web site, super design and style, rattling clean and utilize friendly.

Write a comment