Chrysto Panayotov weblog
Hi guys, here is a new effect – how to create before/after image viewer with TweenLite and Draggable. You can drag it, click it, or have external navigation. It works on touch devices, also!
[button url=”http://codepen.io/bassta/pen/Fypuw” style=”green” size=”small” type=”cloud” icon=”check” target=”_blank”] View demo [/button]
[highlight]Update: It was featured on the front page of codepen! [/highlight]
Recently, I was asked how this effect of changing pages can be achieved. Here is a pen on how to do it with little help from GSAP.
[button url=”http://codepen.io/burnandbass/full/Eicla” style=”green” size=”small” type=”cloud” icon=”check” target=”_blank”] View demo [/button]
Check it the pen at http://codepen.io/burnandbass/pen/cvdjG
In a recent project, I had to deal with this task – writing and event handler to detect click events outside an element. The first thing that came to mind was listening for click events somewhere higher in the DOM hierarchy ( can be parent element, or the window object for example ). Then, I can determine the element that triggered the event and all the elements, through the event bubble .
Here is the final result:
See the Pen Click outside element by Chrysto (@burnandbass) on CodePen
[button url=”http://bassta.bg/wp-content/uploads/2013/08/pulse_lang_bg.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILE [/button]
Pulse CMS have always been my choice when it comes to small projects and one-page websites. It is easy to set up ( no database ) and has everything your clients need – easy way to edit content, gallery, contact form, blog and stats. If you haven’t heard about it, check the demo. You can include it into your own, static html/php template, or use it with the responsive front-end template that comes with it. The admin area is easy to translate – you just need to edit the pulsepro/includes/lang.php file. Today’s freebie is bulgarian translation to the admin area. You can download it from here. If you’ve purchased Pulse CMS, you can just drop the lang.php file into pulsepro/includes folder and override default language file.
Continue reading “Bulgarian translation to Pulse CMS v 2.5.5”
Terms and conditions are very important – the more clear they are, the better. Recently I stumbled upon what I believe to be the best terms and conditions ever written. You can read them at http://redpen.io/
[note]
“This is the deal: you retain ownership of your uploads. Your data will not be sold or shared. We will never ever spam you.
[/note]
Keep rocking, guys! And no joke, take a look of the great website http://tosdr.org/ . It features summarized terms and conditions of the most popular websites.
Today I will show you how you can apply parallax effect to every website with tiled background.
[button url=”http://bassta.bg/demos/tiled-parallax-effect/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/tiled-parallax-effect.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button]
Today, less and less people are creating flash websites. Unless there is some very special 3D content, augmented reality or the mobile market is one-digit percentage, people build their websites using HTML5, CSS3 and Javascript. But every now and then, I stumble upon some great website built with flash. Flash was used to create all varieties of effects ( from simple transition to complex shaders ) and now most of them can be reproduced with JavaScript. Today I will show you three flash websites with very nice effects, that could’ve been bult with modern day technologies.
Continue reading “Three flash websites that could be done with Javascript”
In this quick tip I’will show you how you can easily animate text with TweenMax.
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 1 [/button]
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index2.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 2 [/button]
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index3.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 3 [/button]
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index4.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 4 [/button]
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index5.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 5 [/button]
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index6.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 6 [/button]
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index7.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 7 [/button]
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index8.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 8 [/button]
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index9.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 9 [/button]
[button url=”http://bassta.bg/demos/tweenmax-text-animations/index10.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 10 [/button]
[button url=”http://bassta.bg/downloads/tweenmax-text-animations.zip” style=”blue” size=”small” type=”square” icon=”download” target=”_blank”] DOWNLOAD ALL DEMOS [/button]
For some scrolling effects, you may need to know how much percent the page is scrolled. All we need is to know for that is the window height, window top position and document height.
[button url=”http://bassta.bg/demos/scroll-percent/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/scroll-percent.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button]