yogsototh/apintro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

almost working and nicer

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2015-08-31 21:42:47 +02:00
parent 4026589963
commit 3904834a8e
4 changed files with 34 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
resources/public/index.html
View file

@ -31,7 +31,8 @@ table {border-collapse: collapse;border-spacing: 0;}
a{color:inherit; text-decoration: none;border-bottom: none;}
.anchor {position: absolute;opacity:0.5;}
.anchor:hover {opacity:0.9;}
img.userpic { filter: saturate(0); -webkit-filter: saturate(0); }
img.userpic:hover { filter: none; -webkit-filter: none; }
</style>
</head>
<body>

25
src/apintro/core.cljs
View file

@ -28,11 +28,13 @@
(def ease1 (animation/easer 0.0))
(def ease2 (animation/easer 0.3))
(def ease3 (animation/easer 0.0))
(def ease4 (animation/easer 0.0))
(def complex-transition
(animation/easing-chain
[[ease1 0.5 1.0 200 animation/linear]
[ease2 0.3 1.0 300 animation/linear]
[[ease1 0.5 1.0 400 animation/linear]
[ease2 0.3 1.0 400 animation/linear]
[ease3 0.0 360.0 600 animation/linear]
]))
(def orange "#E67E22")
@ -58,10 +60,10 @@
:color "rgba(255,255,255,0.9)"
}
:node/on-attached (fn [node callback]
(animation/start-easing! ease1 0 1.0 1000 animation/linear callback)
(animation/start-easing! ease2 0.3 1.0 1000 animation/linear callback)
(animation/start-easing! ease3 0.0 (* 3 360) 1000 animation/quad-out callback)
; (complex-transition)
; (animation/start-easing! ease1 0 1.0 1000 animation/linear callback)
; (animation/start-easing! ease2 0.3 1.0 1000 animation/linear callback)
; (animation/start-easing! ease3 0.0 (* 3 360) 1000 animation/quad-out callback)
(complex-transition)
)
}
text])
@ -77,13 +79,22 @@
(defn ease-view []
(let [inf-ease (animation/easer 0.0)
now (.getTime (js/Date.))]
[:div {:node/on-attached (fn [a b] (infinite-easing inf-ease 0)) }
[:div
{
:node/on-attached (fn [node callback]
(infinite-easing inf-ease 0)) }
[page 0 "title" orange "#subtitle" "To Sub Title »"
[:div
[animated-title (gets [:title])]
[:div.project {:style {:font-family "Monaco,monospace" :opacity 0.5}}
(gets [:vgapi :project-id])]
[:div
{:style {:opacity (rx (str @ease4))}
:node/on-attached (fn [node callback]
(animation/start-easing! ease4 0.0 1.0 7000 animation/quad-in callback))
}
(rx [vgapi/view (gets [:vgapi]) now inf-ease])
]
]]
[page 1 "subtitle" green "#title" "« Back to Title"
[animated-title (gets [:subtitle])]]]

7
src/apintro/message.cljs
View file

@ -122,9 +122,11 @@
(:user-profile_image_url message))
_ (when-not image-url (println "image-url nil: " message))
author-page (author-page-url message)]
[:img {:style {:max-height "100%"
[:img.userpic
{:style {:max-height "100%"
:max-width "30%"
:margin-right "2%"
; :-webkit-filter "saturate(0)"
:cursor "pointer"
:float "left"
}
@ -151,10 +153,11 @@
[:div {:style {:height (str height "vh")
:line-height "1.6em"
:width "99%"
; :-webkit-filter "blur(1px)"
:background "rgba(0,0,0,0.9)"
:margin "1px"
:color "rgba(255,255,255,0.8)"
:font-size "0.5em"
:font-size "0.3em"
:overflow "hidden"
}}
[user-pic {:message message}]

2
src/apintro/vgapi.cljs
View file

@ -96,7 +96,7 @@
nb-seconds (count (keys tweets-by-sec))
max-nb (reduce #(max %1 (count %2)) 0 (vals tweets-by-sec))
vh-height (/ 40 max-nb)
tw-width (* 5 vh-height)
tw-width (* 3 vh-height)
]
[:div {:style {:text-align "left"
:line-height "2em"