MySQL функция для получения URL в дереве

Есть дерево типа “Adjacency list”(id=>parent_id). Нужно получить URL по ID объекта.

Пример функции для UMI CMS:

DELIMITER $$
DROP FUNCTION IF EXISTS `_YOUR_DATABASE_`.`GetURLPath` $$
CREATE FUNCTION `_YOUR_DATABASE_`.`GetURLPath` (GivenID INT) RETURNS VARCHAR(1024)
DETERMINISTIC
BEGIN
    DECLARE rv VARCHAR(1024);
    DECLARE urlPath VARCHAR(1024);
    DECLARE thisSlug VARCHAR(120);
    DECLARE cm CHAR(1);
    DECLARE ch INT;

    SET rv = '';
    SET urlPath = (select alt_name from cms3_hierarchy where cms3_hierarchy.id = GivenID);
    SET cm = '';
    SET ch = GivenID;
    SET thisSlug = '';

    WHILE ch > 0 DO
        SELECT IF(rel_id IS NULL,-1, rel_id),(select alt_name from cms3_hierarchy where cms3_hierarchy.id = rel_id) INTO ch, thisSlug FROM
        (
            SELECT rel_id as 'rel_id' FROM cms3_hierarchy_relations
                WHERE child_id = ch
                ORDER BY rel_id DESC
                LIMIT 1
             )
        A;
        IF ch > 0 THEN
            SET rv = CONCAT(rv,cm,ch);
            SET urlPath = CONCAT('/', thisSlug, '/', urlPath);
            SET cm = ',';
        END IF;
    END WHILE;
    RETURN urlPath;
END $$
DELIMITER ;

SELECT GetURLPath(23);

DELIMITER $$

DROP FUNCTION IF EXISTS `_YOUR_DATABASE_`.`GetURLPath` $$

CREATE FUNCTION `_YOUR_DATABASE_`.`GetURLPath` (GivenID INT) RETURNS VARCHAR(1024)

DETERMINISTIC

BEGIN

DECLARE rv VARCHAR(1024);

DECLARE urlPath VARCHAR(1024);

DECLARE thisSlug VARCHAR(120);

DECLARE cm CHAR(1);

DECLARE ch INT;

SET rv = '';

SET urlPath = (select alt_name from cms3_hierarchy where cms3_hierarchy.id = GivenID);

SET cm = '';

SET ch = GivenID;

SET thisSlug = '';

WHILE ch > 0 DO

SELECT IF(rel_id IS NULL,-1, rel_id),(select alt_name from cms3_hierarchy where cms3_hierarchy.id = rel_id) INTO ch, thisSlug FROM

(

SELECT rel_id as 'rel_id' FROM cms3_hierarchy_relations

WHERE child_id = ch

ORDER BY rel_id DESC

LIMIT 1

)

IF ch > 0 THEN

SET rv = CONCAT(rv,cm,ch);

SET urlPath = CONCAT('/', thisSlug, '/', urlPath);

SET cm = ',';

END IF;

END WHILE;

RETURN urlPath;

END $$

DELIMITER ;

SELECT GetURLPath(23);

Функцию лекго изменить, если нужно получить список ID например или если нужно ходить только по одной таблице.

Получение email github-пользователя в yii2-authclient

Добавить комментарий

У стандартного клиента yii2 для логина через соцсети yii2-authclient есть замечательный простой плагин для github.

Как и у всех многих таких GitHub-OAuth клиентов, вместе с пользовательской информацией не приходит email. Это особенность непосредственно GitHub-a(http://stackoverflow.com/questions/24689889/the-accounts-github-package-is-causing-my-meteor-user-to-have-a-null-email).

Решается это просто.
В конфиге authClient добавляем нужный нам scope:

        'authClientCollection' => [
            'class' => 'yii\authclient\Collection',
            'clients' => [
                'github' => [
                    'class' => 'yii\authclient\clients\GitHub',
                    'clientId' => 'YOUR_CLIENT_ID',
                    'clientSecret' => 'YOUR_SECRET',
                    'scope' => 'user' // user включает в себя требуемый user:email
                ],
            ],
        ],

'authClientCollection' => [

'class' => 'yii\authclient\Collection',

'clients' => [

'github' => [

'class' => 'yii\authclient\clients\GitHub',

'clientId' => 'YOUR_CLIENT_ID',

'clientSecret' => 'YOUR_SECRET',

'scope' => 'user' // user включает в себя требуемый user:email

В successCallback-функции делаем дополнительный API вызов на получение email-адресов(https://developer.github.com/v3/users/emails/#list-email-addresses-for-a-user):

    public function successCallback($client)
    {
        $attributes = $client->getUserAttributes();

        // getting user email
        try {
            $emails = $client->api('user/emails');

            foreach ($emails as $email) {
                if ($email['primary'] === true) {
                    $attributes['email'] = $email['email'];
                }
            }

        } catch (\yii\authclient\InvalidResponseException $e) {
            // no email :-(
        }
        // do other stuff with our data!
    }

public function successCallback($client)

{

$attributes = $client->getUserAttributes();

// getting user email

try {

$emails = $client->api('user/emails');

foreach ($emails as $email) {

if ($email['primary'] === true) {

$attributes['email'] = $email['email'];

}

} catch (\yii\authclient\InvalidResponseException $e) {

// no email :-(

}

// do other stuff with our data!

}

Собственно теперь, если API вызов прошёл успешно – в $attributes будет долгожданный email.

SCSS button generator

Добавить комментарий

http://unicorn-ui.com/buttons/builder/

Тень у элемента бывает разная…

Добавить комментарий

Первая картина – как выглядит элемент, но при наведении у него меняется фон, появляется еще и цветная тень, и, как ни странно, она вращается вокруг элемента (кар. 2-3)

Реализация

HTML

<h1 class="logo header__logo">
     <a href="/" data-name="Про CSS">
          <span class="item--about">Про</span> 
          <span class="item--css">CSS</span>
     </a>
</h1>

</a>

</h1>

CSS

// customize bootstrap variables here:
@import "bootstrap";
@import "compass";


.header__logo,
.header__logo A {
  text-decoration: none;
  text-shadow: 0 0 5px #7f0b22;
  color: white;
  margin: 100px auto;
  text-align: center;
}

.header__logo .logo__no-link,
.header__logo A {
  display: block;
  position: relative;
  width: 224px;
  height: 224px;
  background: crimson;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 transparent inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);
  box-shadow: 0 0 0 transparent inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);
}
.header__logo .logo__no-link:before,
.header__logo A:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 224px;
  margin-right: -.1em;
  vertical-align: middle;
}

.header__logo A {
  -webkit-transition: all .5s;
  transition: all .5s;
}
.header__logo A:after {
  content: "";
  display: block;
  position: absolute;
  width: 268.8px;
  height: 268.8px;
  top: -22.4px;
  left: -22.4px;
  border-radius: 50%;
  /* @include shadow ( 0, 0, transparent); */
  -webkit-transition: all .5s;
  /* @include shadow ( 0, 0, transparent); */
  transition: all .5s;
}
.header__logo A:hover {
  background: #444;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);
  text-shadow: 0 2px 5px black;
  color: #DDD;
}
.header__logo A:hover{&:after {
  -webkit-box-shadow: -14.56px -14.56px 0 0 rgba(255, 0, 0, 0.3), -20.384px 0 0 0 rgba(255, 170, 0, 0.3), -14.56px 14.56px 0px 0 rgba(170, 255, 0, 0.3), 0 20.384px 0px 0 rgba(0, 255, 0, 0.3), 14.56px 14.56px 0px 0 rgba(0, 255, 170, 0.3), 20.384px 0 0px 0 rgba(0, 170, 255, 0.3), 14.56px -14.56px 0px 0 rgba(0, 0, 255, 0.3), 0 -20.384px 0px 0 rgba(170, 0, 255, 0.3);
  box-shadow: -14.56px -14.56px 0 0 rgba(255, 0, 0, 0.3), -20.384px 0 0 0 rgba(255, 170, 0, 0.3), -14.56px 14.56px 0px 0 rgba(170, 255, 0, 0.3), 0 20.384px 0px 0 rgba(0, 255, 0, 0.3), 14.56px 14.56px 0px 0 rgba(0, 255, 170, 0.3), 20.384px 0 0px 0 rgba(0, 170, 255, 0.3), 14.56px -14.56px 0px 0 rgba(0, 0, 255, 0.3), 0 -20.384px 0px 0 rgba(170, 0, 255, 0.3);
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}}

/* Animations
-------------------------------- */
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Animations
-------------------------------- */
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

// customize bootstrap variables here:

@import "bootstrap";

@import "compass";

.header__logo,

.header__logo A {

text-decoration: none;

text-shadow: 0 0 5px #7f0b22;

color: white;

margin: 100px auto;

text-align: center;

}

.header__logo .logo__no-link,

.header__logo A {

display: block;

position: relative;

width: 224px;

height: 224px;

background: crimson;

border-radius: 50%;

-webkit-box-shadow: 0 0 0 transparent inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);

box-shadow: 0 0 0 transparent inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);

}

.header__logo .logo__no-link:before,

.header__logo A:before {

content: "";

display: inline-block;

width: 0;

height: 224px;

margin-right: -.1em;

vertical-align: middle;

}

.header__logo A {

-webkit-transition: all .5s;

transition: all .5s;

}

.header__logo A:after {

content: "";

display: block;

position: absolute;

width: 268.8px;

height: 268.8px;

top: -22.4px;

left: -22.4px;

border-radius: 50%;

/* @include shadow ( 0, 0, transparent); */

-webkit-transition: all .5s;

/* @include shadow ( 0, 0, transparent); */

transition: all .5s;

}

.header__logo A:hover {

background: #444;

-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) inset, 0 0 0 10px white, 0 -3px 10px 9px rgba(100, 100, 100, 0.5);

text-shadow: 0 2px 5px black;

color: #DDD;

}

.header__logo A:hover{&:after {

-webkit-box-shadow: -14.56px -14.56px 0 0 rgba(255, 0, 0, 0.3), -20.384px 0 0 0 rgba(255, 170, 0, 0.3), -14.56px 14.56px 0px 0 rgba(170, 255, 0, 0.3), 0 20.384px 0px 0 rgba(0, 255, 0, 0.3), 14.56px 14.56px 0px 0 rgba(0, 255, 170, 0.3), 20.384px 0 0px 0 rgba(0, 170, 255, 0.3), 14.56px -14.56px 0px 0 rgba(0, 0, 255, 0.3), 0 -20.384px 0px 0 rgba(170, 0, 255, 0.3);

box-shadow: -14.56px -14.56px 0 0 rgba(255, 0, 0, 0.3), -20.384px 0 0 0 rgba(255, 170, 0, 0.3), -14.56px 14.56px 0px 0 rgba(170, 255, 0, 0.3), 0 20.384px 0px 0 rgba(0, 255, 0, 0.3), 14.56px 14.56px 0px 0 rgba(0, 255, 170, 0.3), 20.384px 0 0px 0 rgba(0, 170, 255, 0.3), 14.56px -14.56px 0px 0 rgba(0, 0, 255, 0.3), 0 -20.384px 0px 0 rgba(170, 0, 255, 0.3);

-webkit-animation: rotate 2s linear infinite;

animation: rotate 2s linear infinite;

}}

/* Animations

-------------------------------- */

@-webkit-keyframes rotate {

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

/* Animations

-------------------------------- */

@keyframes rotate {

100% {

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

Все готово!

Галерея

Добавить комментарий

Нестандартное исполнение галереи. Фотографии перемещаются протягиванием мыши, прикручен fancy-box.

demo архив

Вращающийся куб с фотографиями

Комментарии (2)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">


<head>


<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<link href="/stylesheets/smoothDivScroll.css" type="text/css" rel="stylesheet" />

</head>
<body>
<div id="holder">
	<div class="box">
		<div class="side1"><img src="http://4.bp.blogspot.com/-S2btlKknLJw/T0a8Nb2m-II/AAAAAAAACv8/j3ZpxP0qSak/s400/pes.jpg" alt="пёс"></div>
		<div class="side2"><img src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s1600/mechty.jpg" alt="мечты"></div>
		<div class="side3"><img src="http://4.bp.blogspot.com/_ebKrCj8TLPk/TPYM-CEBZgI/AAAAAAAABEA/foVrNnZ60N0/s400/mechekluv.jpg" alt="мечеклюв"></div>
		<div class="side4"><img src="http://4.bp.blogspot.com/-JT5diAXNGw4/TaQPTlnr2oI/AAAAAAAABto/jqJRCIzwQOo/s400/kon.jpg" alt="конь"></div>
		<div class="side5"><img src="http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s400/mishki.jpg" alt="мишки"></div>
		<div class="side6"><img src="http://2.bp.blogspot.com/_ebKrCj8TLPk/TLIyv4GfDvI/AAAAAAAAAss/l9A_0m-Gyq8/s1600/tigr.jpg" alt="тигры"></div>
	</div>
</div>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</div>

</html>

CSS

#holder {
  margin:150px auto;
  -webkit-perspective:600px;
  -moz-perspective:600px;
  text-indent: 0px;
}

.box {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  -webkit-animation: spin 20s infinite linear;
  -moz-animation: spin 20s infinite linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.box div {
  position: absolute;
  height: 200px;
  width: 200px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); 
  -webkit-animation:rotate 15s infinite linear;
  -moz-animation:rotate 15s infinite linear;
}

.box div img {width:200px; height:200px;
  border-radius:200px;
  -webkit-animation:rot 10s infinite linear;
  -moz-animation:rot 10s infinite linear;
  padding: 0;
}

.box div.side1 {
  background:rgba( 213, 62, 7, 0.8);
  -webkit-transform:translateZ(100px);
  -moz-transform:translateZ(100px);
}
.box div.side2 {
  background:rgba( 127, 255, 212, 0.8);
  -webkit-transform:rotateY(90deg) translateZ(100px);
  -moz-transform:rotateY(90deg) translateZ(100px);
}
.box div.side3 {
  background:rgba( 255, 219, 88, 0.8);
  -webkit-transform:rotateY(180deg) translateZ(100px);
  -moz-transform:rotateY(180deg) translateZ(100px);
}
.box div.side4 {
  background:rgba( 153, 17, 153, 0.8);
  -webkit-transform:rotateY(-90deg) translateZ(100px);
  -moz-transform:rotateY(-90deg) translateZ(100px);
}
.box div.side5 {
  background:rgba( 0, 71, 171, 0.8);
  -webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
  -moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.box div.side6  {
  background:rgba( 0, 171, 147, 0.8);
  -webkit-transform:rotateX(90deg) translateZ(100px);
  -moz-transform:rotateX(90deg) translateZ(100px);
}

@-moz-keyframes spin {
  0% {-moz-transform: rotateX(0deg) rotateY(0deg);}
  100% {-moz-transform: rotateX(1080deg) rotateY(360deg);}
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotateX(0deg) rotateY(0deg);}
  100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);}
}
@-moz-keyframes rot {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rot {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}

#holder {

margin:150px auto;

-webkit-perspective:600px;

-moz-perspective:600px;

text-indent: 0px;

}

.box {

position: relative;

margin: 0 auto;

height: 200px;

width: 200px;

-webkit-animation: spin 20s infinite linear;

-moz-animation: spin 20s infinite linear;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

}

.box div {

position: absolute;

height: 200px;

width: 200px;

box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);

-webkit-animation:rotate 15s infinite linear;

-moz-animation:rotate 15s infinite linear;

}

.box div img {width:200px; height:200px;

border-radius:200px;

-webkit-animation:rot 10s infinite linear;

-moz-animation:rot 10s infinite linear;

padding: 0;

}

.box div.side1 {

background:rgba( 213, 62, 7, 0.8);

-webkit-transform:translateZ(100px);

-moz-transform:translateZ(100px);

}

.box div.side2 {

background:rgba( 127, 255, 212, 0.8);

-webkit-transform:rotateY(90deg) translateZ(100px);

-moz-transform:rotateY(90deg) translateZ(100px);

}

.box div.side3 {

background:rgba( 255, 219, 88, 0.8);

-webkit-transform:rotateY(180deg) translateZ(100px);

-moz-transform:rotateY(180deg) translateZ(100px);

}

.box div.side4 {

background:rgba( 153, 17, 153, 0.8);

-webkit-transform:rotateY(-90deg) translateZ(100px);

-moz-transform:rotateY(-90deg) translateZ(100px);

}

.box div.side5 {

background:rgba( 0, 71, 171, 0.8);

-webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);

-moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);

}

.box div.side6 {

background:rgba( 0, 171, 147, 0.8);

-webkit-transform:rotateX(90deg) translateZ(100px);

-moz-transform:rotateX(90deg) translateZ(100px);

}

@-moz-keyframes spin {

0% {-moz-transform: rotateX(0deg) rotateY(0deg);}

100% {-moz-transform: rotateX(1080deg) rotateY(360deg);}

}

@-webkit-keyframes spin {

0% {-webkit-transform: rotateX(0deg) rotateY(0deg);}

100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);}

}

@-moz-keyframes rot {

0% {-moz-transform: rotate(0deg);}

100% {-moz-transform: rotate(360deg);}

}

@-webkit-keyframes rot {

0% {-webkit-transform: rotate(0deg);}

100% {-webkit-transform: rotate(360deg);}

}

Наклейка css

Добавить комментарий

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">


<head>


<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<link href="/stylesheets/smoothDivScroll.css" type="text/css" rel="stylesheet" />


	
	<!--[if IE 7]>
		<link rel="stylesheet" type="text/css" href="ie7.css" />
	<![endif]-->



</head>


<body>


<div id="Awesome" class="anim750">
                
        <div class="reveal circle_wrapper">
        <div class="circle">Привет!</div>
    </div>
                                    
    <div class="sticky anim750">
        <div class="front circle_wrapper anim750">
            <div class="circle anim750"></div>
            </div>
    </div>
                
        <h4>Отклей меня!</h4>
                                    
            <div class="sticky anim750">
        <div class="back circle_wrapper anim750">
            <div class="circle anim750"></div>
        </div>
    </div>
</div>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--[if IE 7]>

<![endif]-->

</head>

<body>

<div class="circle">Привет!</div>

</div>

</div>

<h4>Отклей меня!</h4>

</div>

</html>

SCSS

// customize bootstrap variables here:
@import "bootstrap";
@import "compass";

.anim750{
  @include  transition(all 750ms ease-in-out);
}

#Awesome{
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    backface-visibility: hidden;
}

#Awesome .sticky{
    @include transform(rotate(45deg));
}

#Awesome:hover .sticky{
    @include transform(rotate(10deg));
}

#Awesome .sticky{
    position: absolute;
    top: 0;
    left: 0;
    width:180px;
    height: 180px;
}

#Awesome .reveal .circle{
    @include box-shadow (0 1px 0px rgba(0,0,0,.15));
    font-family: 'helvetica neue', arial;
    font-weight: 200;
    line-height: 140px;
    text-align: center;
    cursor: pointer;
}

#Awesome .reveal .circle{
    background: #fafafa;
}

#Awesome .circle_wrapper{
    position: absolute;
    width: 180px;
    height: 180px;
    left: 0px;
    top: 0px;
    overflow: hidden;
}

#Awesome .circle{
    position: absolute;
    width: 140px;
    height:  140px;
    margin: 20px;
    @include border-radius (999px);
}

#Awesome .back{
    height: 10px;
    top: 30px;
}

#Awesome:hover .back{
    height: 90px;
    top: 110px;
}

#Awesome .back .circle{
    margin-top: -130px;
    background-color: #fbec3f;
 	@include background-image( linear-gradient(bottom, rgba(251,236,63,.0), rgba(255,255,255,.8)));
}

#Awesome:hover .back .circle{
    margin-top: -50px;
}

#Awesome .front{
    height: 150px;
    bottom: 0;
    top: auto;  
    @include box-shadow( 0 -140px 20px -140px rgba(0,0,0,.3));
}

#Awesome:hover .front{
    height: 70px;  
    @include box-shadow( 0 -60px 10px -60px rgba(0,0,0,.1));
}

#Awesome .front .circle{
    margin-top: -10px;
    background: #fbec3f;
    @include background-image(linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%));

}
#Awesome h4{
    font-family: 'helvetica neue', arial;
    font-weight: 200;
    text-align: center;
    position: absolute;
    width: 180px;
    height: 140px;
    line-height: 140px;
    @include transition( opacity 50ms linear 400ms);
}

#Awesome:hover h4{
    opacity: 0;
    @include transition(opacity 50ms linear 300ms);
}

#Awesome:hover .front .circle{
    margin-top: -90px;
    background-color: #e2d439;
    background-position: 0 100px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

// customize bootstrap variables here:

@import "bootstrap";

@import "compass";

.anim750{

@include transition(all 750ms ease-in-out);

}

#Awesome{

position: relative;

width: 180px;

height: 180px;

margin: 0 auto;

backface-visibility: hidden;

}

#Awesome .sticky{

@include transform(rotate(45deg));

}

#Awesome:hover .sticky{

@include transform(rotate(10deg));

}

#Awesome .sticky{

position: absolute;

top: 0;

left: 0;

width:180px;

height: 180px;

}

#Awesome .reveal .circle{

@include box-shadow (0 1px 0px rgba(0,0,0,.15));

font-family: 'helvetica neue', arial;

font-weight: 200;

line-height: 140px;

text-align: center;

cursor: pointer;

}

#Awesome .reveal .circle{

background: #fafafa;

}

#Awesome .circle_wrapper{

position: absolute;

width: 180px;

height: 180px;

left: 0px;

top: 0px;

overflow: hidden;

}

#Awesome .circle{

position: absolute;

width: 140px;

height: 140px;

margin: 20px;

@include border-radius (999px);

}

#Awesome .back{

height: 10px;

top: 30px;

}

#Awesome:hover .back{

height: 90px;

top: 110px;

}

#Awesome .back .circle{

margin-top: -130px;

background-color: #fbec3f;

@include background-image( linear-gradient(bottom, rgba(251,236,63,.0), rgba(255,255,255,.8)));

}

#Awesome:hover .back .circle{

margin-top: -50px;

}

#Awesome .front{

height: 150px;

bottom: 0;

top: auto;

@include box-shadow( 0 -140px 20px -140px rgba(0,0,0,.3));

}

#Awesome:hover .front{

height: 70px;

@include box-shadow( 0 -60px 10px -60px rgba(0,0,0,.1));

}

#Awesome .front .circle{

margin-top: -10px;

background: #fbec3f;

@include background-image(linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%));

}

#Awesome h4{

font-family: 'helvetica neue', arial;

font-weight: 200;

text-align: center;

position: absolute;

width: 180px;

height: 140px;

line-height: 140px;

@include transition( opacity 50ms linear 400ms);

}

#Awesome:hover h4{

opacity: 0;

@include transition(opacity 50ms linear 300ms);

}

#Awesome:hover .front .circle{

margin-top: -90px;

background-color: #e2d439;

background-position: 0 100px;

}

Анимация css в действии

Добавить комментарий

Пример выполнения и другие приколы

Слайдер по зажатию кнопки и сдвигу мыши

Добавить комментарий

Необходимые js-файлы

jquery.kinetic.min

jquery.mousewheel.min

jquery.smoothdivscroll-1.3-min

jquery-ui-1.10.3.custom.min

Css файл стандартный

smoothDivScroll

Sass – код

// customize bootstrap variables here:
@import "bootstrap";
@import "compass";


$orange_color	: #e78536;

$gray_color		: #ededed;

#thumbnails_wrapper{
	z-index			: 2;
	position		: relative;
	bottom			: 0;
	width			: 100%;
	height			: 425px;
	background		: none;
	padding			: 0;
	z-index			: 2;
	overflow		: hidden; 
	
	
	.thumbnails_wrapper_fon{
		position		: absolute;
		z-index			: 20;
		right			: 0;
		top			: 0;
		height			: 100%;
		width			: 150px;
		background		: url(/images/thumbnails_wrapper.png) right top repeat-y transparent; 
	}
	
	
	#makeMeScrollable{
		position		: relative; 
		padding			: 0; 
		width			: 100%; 
		margin			: 0px auto;
		z-index			: 1;
		

			.container{
				position		: relative; 
				left			: 0px; 
				padding			: 0;
				margin			: 0 !important; 
			}
			
			.content{
				float			:left; 
				height			: 425px;
				width			: 300px;
			}
			
			div{
				margin			: 0px; 
				height			: 100%;
			

				a:link, a:active, a:visited{	
					display			: block; 
					padding			: 30px 40px;
					background		: none;
					border 			: solid 1px $gray_color;
					border-right	: transparent;
					height			: 425px;
					width			: 300px;
					text-decoration	: none;
					cursor			: url(/images/cursor.png), pointer;
										
					.date{
						display			: inline-block;
						background		: $gray_color;
						color			: #353a3c;
						padding			: 5px 10px;
						font-size		: 14px;
						line-height		: normal;
					}
					
					.title{
						display			: block;
						font-size		: 20px;
						line-height		: normal;
						color			: $orange_color;
						background		: none;
						margin			: 25px 0;
					}
					
					.text{
						display			: block;
						font-size		: 15px;
						line-height		: 22px;
						color			: #000000;
					}
				}
					
				a:hover{
					background		: $gray_color;
					border-bottom	: solid 2px #eb7e26;
					
					.date{
						
						background		: #ffffff;
						
					}
					
					.title{
						color			: #353a3c;
					}
					
				}
			}
		
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

// customize bootstrap variables here:

@import "bootstrap";

@import "compass";

$orange_color : #e78536;

$gray_color : #ededed;

#thumbnails_wrapper{

z-index : 2;

position : relative;

bottom : 0;

width : 100%;

height : 425px;

background : none;

padding : 0;

z-index : 2;

overflow : hidden;

.thumbnails_wrapper_fon{

position : absolute;

z-index : 20;

right : 0;

top : 0;

height : 100%;

width : 150px;

background : url(/images/thumbnails_wrapper.png) right top repeat-y transparent;

}

#makeMeScrollable{

position : relative;

padding : 0;

width : 100%;

margin : 0px auto;

z-index : 1;

.container{

position : relative;

left : 0px;

padding : 0;

margin : 0 !important;

}

.content{

float :left;

height : 425px;

width : 300px;

}

div{

margin : 0px;

height : 100%;

a:link, a:active, a:visited{

display : block;

padding : 30px 40px;

background : none;

border : solid 1px $gray_color;

border-right : transparent;

height : 425px;

width : 300px;

text-decoration : none;

cursor : url(/images/cursor.png), pointer;

.date{

display : inline-block;

background : $gray_color;

color : #353a3c;

padding : 5px 10px;

font-size : 14px;

line-height : normal;

}

.title{

display : block;

font-size : 20px;

line-height : normal;

color : $orange_color;

background : none;

margin : 25px 0;

}

.text{

display : block;

font-size : 15px;

line-height : 22px;

color : #000000;

}

a:hover{

background : $gray_color;

border-bottom : solid 2px #eb7e26;

.date{

background : #ffffff;

}

.title{

color : #353a3c;

}

HTML – код

	<div id="thumbnails_wrapper">
						
						
										<div id="makeMeScrollable">
											<div class="content">
									        	<div style="">
									        		<a href="#">
										        		<span class="date">24.01.2014</span>
										        		<span class="title">Улучшен сервис из Китая</span>
										        		<span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span>
									        		</a>
												</div>	
											</div>
									       
										   <div class="content">
									        	<div style="">
									        		<a href="#">
										        		<span class="date">24.01.2014</span>
										        		<span class="title">Улучшен сервис из Китая</span>
										        		<span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span>
									        		</a>
												</div>	
											</div>
											
											<div class="content">
									        	<div style="">
									        		<a href="#">
										        		<span class="date">24.01.2014</span>
										        		<span class="title">Улучшен сервис из Китая</span>
										        		<span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span>
									        		</a>
												</div>	
											</div>
											
											<div class="content">
									        	<div style="">
									        		<a href="#">
										        		<span class="date">24.01.2014</span>
										        		<span class="title">Улучшен сервис из Китая</span>
										        		<span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span>
									        		</a>
												</div>	
											</div>
											
											<div class="content">
									        	<div style="">
									        		<a href="#">
										        		<span class="date">24.01.2014</span>
										        		<span class="title">Улучшен сервис из Китая</span>
										        		<span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span>
									        		</a>
												</div>	
											</div>
											
											<div class="content">
									        	<div style="">
									        		<a href="#">
										        		<span class="date">24.01.2014</span>
										        		<span class="title">Улучшен сервис из Китая</span>
										        		<span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span>
									        		</a>
												</div>	
											</div>
											
											<div class="content">
									        	<div style="">
									        		<a href="#">
										        		<span class="date">24.01.2014</span>
										        		<span class="title">Улучшен сервис из Китая</span>
										        		<span class="text">Компания LCL CARGO SYSTEM с 2011 года пересмотрела ряд договорных отношений с морскими линиями и сменила ряд агентов в китае и ЮВА</span>
									        		</a>
												</div>	
											</div>
										   
										</div>




										<script type="text/javascript">
											// Initialize the plugin with no custom options
											$(document).ready(function () {
												// I just set some of the options
												$("#makeMeScrollable").smoothDivScroll({
													touchScrolling: true,
													manualContinuousScrolling: true,
													hotSpotScrolling: false,
													mousewheelScrolling: false
												});
											});
										</script>
						
						</div>