Scriptsammlung
PANZOOM
Um einen Canvas festzulegen in dem Inhalt verschoben und gezoomt werden kann müsst ihr folgendes tun:
1. Rechtsklick auf die Zeile in der der PANZOOM statt finden solll
2. Set HTML Class and ID
3. Class: panzoom
4. Use Browser Height for Row Height
5. Ein HTML-Element über "+More" anlegen
6. Folgenden Script einfügen:
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
if(obj.slug == "panzoom") {
var area = document.querySelector('.panzoom .row-inner')
panzoom(area, {
zoomSpeed: 0.1,
maxZoom: 4,
minZoom: 1,
exclude: [document.getElementsByTagName('a')],
}).zoomAbs(
0, // initial x position
0, // initial y position
1 // initial zoom
);
}
});
</script>
7. An der ROT markierten Stelle bitte euren Slug (ohne .slug-) einfügen
8. Eure Inhalte in der Zeile einfügen und mit den verschiedenen Einstellungen im Script experimentieren
Einfügen einer SVG in PanZoom
Es ist auch möglich, und für euch sehr spannend, den Inhalt des PANZOOM vorher in Adobe Illustrator zu gestallten, dort ein Layout aufzubauen und diese dann als .svg zu exportieren. Das schöne an einer SVG ist, dass man sowohl Bilder als auch Texte vorher in Illustrator gestalten kann und sie dann als Script ausgegeben werden und auch Kurven etc. dargestellt werden. Bitte nutzt doch dieses verfahren um eure Inhalte im PANZOOM darzustellen. Beim Export der .svg im Indesign bitte folgende Einstellungen übernehmen:
1. Häkchen bei Zeichenfläche verwenden
2. Schriften > Text: In Konturen umwandeln
3. Optionen > Bildposition: Einbetten
4. Erweiterte Optionen > CSS-Eichgenschaften: Stilelemente
Um eine .svg-Datei in die Zeile einzufügen führt bitte folgende Schritte aus:
1. SVG in den Medien-Browser hochladen
2. Pfad zur SVG in den Informationen des Bildes kopieren
3. Ein HTML-Element über "+More" anlegen
4. Folgendes Script einfügen:
<object data="http://www.talesofnature.de/wp-content/uploads/2020/12/map-.svg" type="image/svg+xml">
<!---Fallback--->
Ihr Browser kann leider kein svg darstellen!
</object>
5. An der ROT markierten Stellen den Pfad zu eurem SVG einfügen
6. Das Element in die Zeile einfügen (bitte wählt die komplette Zeile durch + aus)
Alle Funktionen könnt ihr euch auch unter PanZoom (im Hauptmenü und unter "Pages" im Backend) anschauen.
Einbindung einer extra Seite
Um eine zusätzliche Seite einzubinden, die sich über die Projektseite legt müsst ihr folgendes tun:
1. Unter „Seiten“ erstellt ihr eine neue Seite mit eurem Namen
2. Auf eurer Projektseite im rechten Menu unter „Footer“ im Dropdown die Seite mit eurem Namen auswählen
3. Dann einen Element zum einblenden der extra Seite anlegen:
4. Set HTML Class and ID
5. Class: showpage
6. Auf der extra Seite eine Element zum ausblenden der extra Seite anlegen:
7. Set HTML Class and ID
8. Class: hidepage
Accordion / Navigation
Um Inhalte eurer Seite per Klick sichtbar zu machen könnt ihr folgendes durchführen:
1. Rechtsklick auf die Zeile bzw. Element, das als Button fungieren soll
2. Set HTML Class and ID
> Class: slidebutton; ID: Selbst gewählte ID
3. Rechtsklick auf die Zeile bzw. Element welches sichtbar werden soll
4. Set HTML Class and ID
> Class: slide + Selbst gewählte ID
Elemente durch anklicken verschieben
Class: draggable
News Ticker
Im Hauptmenu findet ihr den Bereich News-Ticker um einen Schriftzug auf eurer Seite zu animieren:
1. News Ticker > Neu hinzufügen
2. Titel des News-Tickers angeben
3. Text des Ticker einfügen (HTML)
3.1 Ihr könnt den Text vorher auf eurer Seite im Textfeld konfigurieren und dann den Quelltext kopieren und einfügen)
4. Veröffentlich
5. Shortcode kopieren
6. Auf der eigenen Seite unter "+MORE" > Shortcode den kopierten Shortcode einfügen
7. Das Element im Grid positionieren
CSS Styles
Hover über Bild > Text sichtbar machen
Caption für Bild festlegen
Class: hoverbildtext
Transparenz von Elemente beim Hover
Transparenz Element 0%
Class: opacity-0
Transparent Element 100%
Class: opacity-1
Transparenz Element 50%
Class: opacity-05
Bilder in Graustufen
Class: grayscale
Rahmen (1px schwarz) um Element
Class: border
Schatten um Element
Class: shadow
Zeilen am oberen Rand der Seite fixieren
Class: fixed-top
Font-Bibliotheken
Velvetyne
Kostenlose und Open-Source Type Foundry
velvetyne.fr
Adobe Font Collection
Kuratierte Sammlung von 40 Adobe Fonts
typewolf.com/adobe-fonts
Google Font Collection
Kuratierte Sammlung von 40 Google Fonts
typewolf.com/google-fonts
Awwwards Free Font Collection
Auswahl an Websites, die mit kostenfreien Schriftfamilien gestaltet und umgesetzt wurden
awwwards.com/awwwards/collections/free-fonts/
Collletttivo
Kostenlose und Open-Source Type Foundry
http://collletttivo.it/
Digitale Archive / Inspiration
Your Uncertain Archive
Artworks, exhibitions, works in public space, pavilions, models, books, talks, and research by Olafur Eliasson and his studio.
www.olafureliasson.net/uncertain
Something Fantastic
Smart, touching, simple achitecture
www.somethingfantastic.net
hoverstat.es
The home of alternative design, code and content on the world wide web.
www.hoverstat.es
Florian Meisenberg Archiv
Ein Algorithmus zeigt Medien, die in Suchmaschinen im Zusammenhang mit Florian Meisenberg auftauchen. Besucher*innen können durch Regler steuern welche Art von Inhalte angezeigt werden.
www.florianmeisenberg.com
Florian Meisenberg by Peter Rostovsky
Archiv als bewegtes 3D Modell mit Sound.
www.florianmeisenberg.com/by-peter-rostovsky/
Sichtbarkeit Gestalten
Archiv eines Seminars von Julia Meer und Franziska Morlok an der FH Potdam, bei dem untersucht wurde wo und wie feministisches Denken und Handeln sichtbar werden und welche Rolle Design dabei spielt.
design.fh-potsdam.de/projekte/sichtbarkeitgestalten/
Arc Gestaltung
Portfolio des Berliner Grafikbüros sortiert in Archivsystematik.
www.arc-gestaltung.de
Lilli Gaigal
Archiv der Zeichnungen.
www.unlaut.eu
Zettelwerk – Archiv für Alltagsdrucksachen
www.zettelwerk.com
Julia Stoscheck Collection
hat begonnen, ihren Sammlungsbestand von mehr als 860 Werken von 282 Künstler*innen ohne Beschränkungen und kostenlos online zugänglich zu machen.
www.jsc.art/