MVP MAGAZINE - ΑΘΛΗΤΙΚΟ ΠΕΡΙΟΔΙΚΟ

titsadmin

SmoothScroll

03 Dec 2012

SmoothScroll is Mootools class that auto targets all the anchors in a page and display a smooth scrolling effect upon clicking them. For a simple use we have created smoothscroll class yjscroll that can be used on your anchors.

Scroll to Section 1
Scroll to Section 2
Scroll to Section 3
Scroll to Section 4

<a class="yjscroll" href="#my_element">Scroll to</a>
<div id="my_element">
	...
</div>

Section 1 back to top

Proin suscipit tincidunt est, in lobortis odio congue id. Etiam id mauris ac sapien sagittis imperdiet. Phasellus et nunc ante, nec ullamcorper risus. Donec arcu elit, tincidunt eget condimentum in, condimentum in sem. Aliquam mi felis, volutpat at tristique condimentum, pellentesque ac massa. Donec dictum rutrum ipsum, sit amet vehicula orci ullamcorper at. In rhoncus felis sed orci sodales sed dictum libero laoreet. Integer elementum ante in diam sodales ac eleifend lacus posuere. Sed erat dolor, blandit quis scelerisque quis, porta id urna.

Nullam placerat ornare enim. Suspendisse in orci quis nisi elementum pretium vel non libero. Sed et dui ut purus gravida elementum lacinia vitae dui. Maecenas pretium est quis erat tincidunt eget rutrum urna sodales. Mauris a tortor ante. Proin laoreet lectus vel lorem semper sed vehicula magna cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id elit arcu.

Section 2 back to top

Section 3 back to top

Section 4 back to top

Image Effects

Shortcodes

20 Nov 2012

Polaroid:

To create polaroids from your favorite images we have added special CSS3 classes that you can use:

yjt_polaroid
yjt_polaroid yjt_tilt
yjt_polaroid yjt_morph

Polaroids can also use radiusb CSS class:

Starting from radiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size)

Image parent <a... title="My title" will be your polaroid title.

<a href="#" class="yjt_polaroid" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_tilt" title="My Image">
  <img alt="My Image" src="images/stories/260x180.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_tilt radiusb10" title="My Image">
  <img alt="My Image" src="images/stories/260x180.jpg" />
</a>
<a href="#" class="yjt_polaroid radiusb5 yjt_morph" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>

Polaroid Tilted Group:

Tilted group makes each polaroid tilt to oposite side of it's neighbour:

<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>

Image Fade:

Image fade is very useful Javascript ( Mootools lib) trick that you can use to fade out/in your images or even show different background on mouseneter:

For demo pourpose we used inline CSS but as you can see this class is very flexible and you can do some real magic by simply adding few CSS lines in your stylesheet.
You would need to use 2 data-ATTR attributes in order to acheive desired effect:

data-yjt_fadeto="FADE_TO_NUMBER (1 = 100% visible, 0.5 = 50% visible )

date-yjt_fadespeed="TRANSITION SPEED IN MILLISECONDS" (1000 = 1sec )

<a href="#" data-fadeto="0.3" data-fadespeed="300" class="yjt_fade">
	<img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" data-fadeto="0"  data-fadespeed="1000" class="yjt_fade" 
style="background:url(images/stories/key.jpg) no-repeat center center;">
	<img alt="My Image" src="images/stories/160x120.jpg" />
</a>

Image borders:

There are several image borders that you can use:

bthin
bthick
yjt_border bspace
yjt_border bspacethick

Images can also use radiusb CSS class:

Starting from radiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size)

<img alt="My Image"  class="bthin" src="images/stories/160x120.jpg" />
<img alt="My Image"  class="radiusb8" src="images/stories/160x120.jpg" />
<span class="yjt_border radiusb8 bthick">
	<img alt="My Image" src="images/stories/160x120.jpg" />
</span>
<span class="yjt_border radiusb8 bspace">
	<img alt="My Image"  class="radiusb8" src="images/stories/160x120.jpg" />
</span>
<span class="yjt_border radiusb8 bspacethick">
	<img alt="My Image"  class="radiusb8" src="images/stories/160x120.jpg" />
</span>

HTML5 Videos

Shortcodes

17 Nov 2012

YJSG 1.0.14 comes with default support for HTML5 video player by using Video.js which also supports Youtube and Vimeo videos. This is a very handy feature that will let you embed video player in any Joomla! content type. We also added .yjh5v_center class that you can use to center your videos within content. For custom skins and more instructions on how to use Videos.js please visit official website.

Default video setup

<video id="default_video" class="video-js vjs-default-skin yjh5v_center" controls width="640" height="264"poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}">
	<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>

Vimeo video setup

<video id="html5vimeo" class="video-js vjs-default-skin video-small yjh5v_center" controls width="640" height="360" data-setup='{"techOrder":["html5", "vimeo"]}'>
	<source src="https://vimeo.com/50700106" type='video/vimeo'>
</video>

Youtube video setup

<video id="html5youtube" class="video-js vjs-default-skin video-small yjh5v_center" controls width="640" height="360" data-setup='{"techOrder":["html5", "youtube"]}'>
	<source src="http://www.youtube.com/watch?v=9QscURRuF0g" type='video/youtube'>
</video>